In this example, you will see how to bind Book class List to Repeater server control and add a pop up window when user will click on the row to confirm that he/she wants to delete a record or not.
Here’s is the solution
Design View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add Confirm popup and Repeater Server control in ASP.NET using jQuery | asxptutorial.com
</title>
<style>
#table1
{
width: 500px;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #666;
}
#table1 th
{
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 29px;
text-align: left;
padding-left: 10px;
background-color: #fafafa;
}
#table1 td
{
border-bottom: 1px solid #eee;
padding-left: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#table1 tr").click(function () {
if (confirm('Are you sure you want to delete:' + $(this).find("td:nth-child(1)").html())) {
$(this).css("background-color", "#FFFFC4");
$(this).fadeOut(700, function () {
$(this).remove();
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="table1">
<thead>
<tr>
<th>
Title
</th>
<th>
Author
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# ((Book)Container.DataItem).Title %>
</td>
<td>
<%# ((Book)Container.DataItem).Author %>
</td>
<td>
<%# ((Book)Container.DataItem).Price %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
<tfoot>
<tr>
<th colspan="2">
 
</th>
<th>
<div id="total">
</div>
</th>
</tr>
</tfoot>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
Repeater1.DataSource = Display();
Repeater1.DataBind();
}
public List<Book> Display()
{
List<Book> Obj = new List<Book>()
{
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 101.1F},
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 120.1F},
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 140.1F},
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 50.1F},
new Book{ Title="Sharepoint 2010 Administration", Author="Aamir Hasan", Price= 70.1F},
new Book{ Title="Sharepoint 2010 Development", Author="Aamir Hasan", Price= 80.1F},
new Book{ Title="jQuery", Author="Aamir Hasan", Price= 90.1F},
new Book{ Title="HTML 5", Author="Aamir Hasan", Price= 20.1F},
new Book{ Title="Javascript", Author="Aamir Hasan", Price= 40.1F},
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 70.1F}
};
return Obj;
}
public class Book
{
public string Title { get; set; }
public string Author { get; set; }
public float Price { get; set; }
}
Output
Download
Repeater-jQuery-Confirm.rar (1.74 kb)
See Live demo