How to Delete Record in GridView Using ASP.Net Ajax and jQuery

Now first create the Employee table in the database.

CREATE TABLE tbl_Emp(Empid int NULL,EmpName varchar(250) NULL, Gender varchar(20), EmpAddress varchar(500) NULL,City varchar(250) NULL,Salary int NULL, Fk_DepId int)

And insert some records into the table:

INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(1, 'Jitendra' , 'Male', 'Demo Address', 'Agra', 4000, 3)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(2, 'Aman' , 'Male', 'Demo Address', 'Ghaziabad', 0, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(3, 'Niman' , 'Male', 'Demo Address', 'Agra', 1000, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(4, 'Rita' , 'Female', 'Demo Address', 'Mathura', 1000, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(5, 'Sita' , 'Female', 'Demo Address', 'Agra', 4000, 3)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(6, 'Rohan' , 'Male', 'Demo Address', 'Agra', 5000, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(7, 'Sohan' , 'Male', 'Demo Address', 'Noida', 4000, 1)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(8, 'Mohan' , 'Male', 'Demo Address', 'Agra', 4000, 5)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(9, 'Ram' , 'Male', 'Demo Address', 'Noida', 5000, 1)

After creating the table create the application. New -> Web Site.

create new website

Provide the name “DeleteRecordfromGridViewUsingJQueryAjax”.

empty web site

Then create a new item.

create new item

Your aspx page looks likes this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvEmp" AutoGenerateColumns="false" CellPadding="4" runat="server">
<Columns>
<asp:BoundField HeaderText="EmpId" DataField="EmpId" />
<asp:BoundField HeaderText="EmpName" DataField="EmpName" />
<asp:BoundField HeaderText="Gender" DataField="Gender" />
<asp:BoundField HeaderText="EmpAddress" DataField="EmpAddress" />
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="hdnEmpId" runat="server" Value='<%#Eval("EmpId") %>'></asp:HiddenField>
<asp:LinkButton ID="btnDelete" Text="Delete Emp" runat="server" OnClientClick="DeleteConfirmbox(this.id);"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#5d5d5d" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function DeleteConfirmbox(val) {
// confirm meg check for delete
var result = confirm('Are you sure delete Emp Record?');
if (result) {
// this is for get hdnvalue id
var value = val.replace("btnDelete", "hdnEmpId");
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/DeletegvEmpData", // this for calling the web method function in cs code.
data: '{empid: "' + $("#" + value).val() + '" }',// empid value
dataType: "json",
success: OnSuccess,
failure: function (data) {
alert(data);
}
});
return false;
}
}
// function OnSuccess
function OnSuccess(response) {
return false;
if (response.d == 'true')
{
}
}
</script>
</body>
</html>

Now add “using System.Data.SqlClient;” and “using System.Data;” in the code behind and write the following code to delete the record in the grid view in the database.

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bindgv();
}
}
protected void Bindgv()
{
SqlConnection con = new SqlConnection("data source=LENOVO;initial catalog=practise;UID=sa;PWD=connect;");
con.Open();
SqlCommand cmd = new SqlCommand("Select Top 10 EmpId, EmpName, Gender, EmpAddress from tbl_Emp", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
gvEmp.DataSource = ds;
gvEmp.DataBind();
}
[System.Web.Services.WebMethod]
public static string DeletegvEmpData(int empid)
{
string strmsg = string.Empty;
SqlConnection con = new SqlConnection("data source=LENOVO;initial catalog=practise;UID=sa;PWD=connect;");
SqlCommand cmd = new SqlCommand("delete from tbl_Emp where EmpId= @Empid", con);
con.Open();
cmd.Parameters.AddWithValue("@Empid", empid);
int retval = cmd.ExecuteNonQuery();
con.Close();
if (retval == 1)
strmsg = "true";
else
strmsg = "false";
return strmsg;
}

Add the jQuery library reference in aspx page:

<script src="Scripts/jquery-1.7.1.min.js"></script>

Test the page:

gridview