Please refer this example. This will delete Repeater Data without getting page refresh using JQuery.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
BindRepeater();
}
function BindRepeater() {
$("[id*=rptCustomers]").find("tr:gt(1)").remove();
$.ajax({
type: "POST",
url: "Default.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
$("[id*=rptCustomers]").attr("border", "1");
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var row = $("[id*=rptCustomers] tr:last-child").clone(true);
$("[id*=rptCustomers] tr:last-child").remove();
$.each(customers, function () {
var customer = $(this);
$(".CustomerID", row).html($(this).find("CustomerId").text());
$(".Name", row).html($(this).find("Name").text());
$(".Country", row).html($(this).find("Country").text());
$("[id*=rptCustomers]").append(row);
row = $("[id*=rptCustomers] tr:last-child").clone(true);
});
}
</script>
<script type="text/javascript">
$(function () {
$("[id*=rptCustomers] [id*=lnkDelete]").click(function () {
if (confirm("Do you want to delete this Customer?")) {
//Determine the GridView row within whose LinkButton was clicked.
//Look for the Hidden Field and fetch the CustomerId.
var customerId = parseInt($(this).parents().find('span.CustomerID').html());
//Make an AJAX call to server side and pass the fetched CustomerId.
$.ajax({
type: "POST",
url: "Default.aspx/DeleteCustomer",
data: '{customerId: ' + customerId + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
if (r.d) {
BindRepeater();
}
}
});
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="rptCustomers">
<tr>
<th>
Id
</th>
<th>
Name
</th>
<th>
Country
</th>
</tr>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label CssClass="CustomerID" Text='<%# Eval("CustomerId") %>' runat="server" />
</td>
<td>
<asp:Label CssClass="Name" Text='<%# Eval("Name") %>' runat="server" />
</td>
<td>
<asp:Label CssClass="Country" Text='<%# Eval("Country") %>' runat="server" />
</td>
<td>
<a id="lnkDelete" href="#">Delete</a>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
Namespaces
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindDummyRow();
}
}
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("CustomerId");
dummy.Columns.Add("Name");
dummy.Columns.Add("Country");
dummy.Rows.Add();
Repeater1.DataSource = dummy;
Repeater1.DataBind();
}
[WebMethod]
public static string GetCustomers()
{
string query = "SELECT top 10 CustomerId, Name, Country FROM Customers";
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
[WebMethod]
public static bool DeleteCustomer(int customerId)
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand("DELETE FROM Customers WHERE CustomerId = @CustomerId"))
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@CustomerId", customerId);
con.Open();
int rowsAffected = cmd.ExecuteNonQuery();
con.Close();
return rowsAffected > 0;
}
}
}
SQL
CREATE TABLE [dbo].[Customers](
[CustomerId] [int] NOT NULL,
[Name] [varchar](100) NOT NULL,
[Country] [varchar](50) NOT NULL
) ON [PRIMARY]
GO
INSERT INTO Customers
SELECT 1, 'John Hammond', 'United States'
UNION ALL
SELECT 2, 'Mudassar Khan', 'India'
UNION ALL
SELECT 3, 'Suzanne Mathews', 'France'
UNION ALL
SELECT 4, 'Robert Schidner', 'Russia'
Please run this code in a new project.