Now first create the Employee table in the database.

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

web form

Your aspx page looks likes this:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title></title>
  4. </head>
  5. <body>
  6. <form id="form1" runat="server">
  7. <div>
  8. <asp:GridView ID="gvEmp" AutoGenerateColumns="false" CellPadding="4" runat="server">
  9. <Columns>
  10. <asp:BoundField HeaderText="EmpId" DataField="EmpId" />
  11. <asp:BoundField HeaderText="EmpName" DataField="EmpName" />
  12. <asp:BoundField HeaderText="Gender" DataField="Gender" />
  13. <asp:BoundField HeaderText="EmpAddress" DataField="EmpAddress" />
  14. <asp:TemplateField>
  15. <ItemTemplate>
  16. <asp:HiddenField ID="hdnEmpId" runat="server" Value='<%#Eval("EmpId") %>'></asp:HiddenField>
  17. <asp:LinkButton ID="btnDelete" Text="Delete Emp" runat="server" OnClientClick="DeleteConfirmbox(this.id);"></asp:LinkButton>
  18. </ItemTemplate>
  19. </asp:TemplateField>
  20. </Columns>
  21. <HeaderStyle BackColor="#5d5d5d" Font-Bold="true" ForeColor="White" />
  22. </asp:GridView>
  24. </div>
  25. </form>
  27. <script src="Scripts/jquery-1.7.1.min.js"></script>
  29. <script type="text/javascript">
  31. function DeleteConfirmbox(val) {
  33. // confirm meg check for delete
  34. var result = confirm('Are you sure delete Emp Record?');
  35. if (result) {
  37. // this is for get hdnvalue id
  38. var value = val.replace("btnDelete", "hdnEmpId");
  40. $.ajax({
  41. type: "POST",
  42. contentType: "application/json; charset=utf-8",
  43. url: "Default.aspx/DeletegvEmpData", // this for calling the web method function in cs code.
  44. data: '{empid: "' + $("#" + value).val() + '" }',// empid value
  45. dataType: "json",
  46. success: OnSuccess,
  47. failure: function (data) {
  48. alert(data);
  49. }
  52. });
  54. return false;
  55. }
  56. }
  58. // function OnSuccess
  59. function OnSuccess(response) {
  60. return false;
  61. if (response.d == 'true')
  62. {
  65. }
  67. }
  68. </script>
  70. </body>
  71. </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.
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (!IsPostBack)
  4. {
  5. Bindgv();
  6. }
  7. }
  9. protected void Bindgv()
  10. {
  11. SqlConnection con = new SqlConnection("data source=LENOVO;initial catalog=practise;UID=sa;PWD=connect;");
  13. con.Open();
  14. SqlCommand cmd = new SqlCommand("Select Top 10 EmpId, EmpName, Gender, EmpAddress from tbl_Emp", con);
  15. SqlDataAdapter da = new SqlDataAdapter(cmd);
  16. DataSet ds = new DataSet();
  17. da.Fill(ds);
  18. con.Close();
  19. gvEmp.DataSource = ds;
  20. gvEmp.DataBind();
  22. }
  24. [System.Web.Services.WebMethod]
  25. public static string DeletegvEmpData(int empid)
  26. {
  27. string strmsg = string.Empty;
  28. SqlConnection con = new SqlConnection("data source=LENOVO;initial catalog=practise;UID=sa;PWD=connect;");
  30. SqlCommand cmd = new SqlCommand("delete from tbl_Emp where EmpId= @Empid", con);
  32. con.Open();
  33. cmd.Parameters.AddWithValue("@Empid", empid);
  34. int retval = cmd.ExecuteNonQuery();
  35. con.Close();
  37. if (retval == 1)
  38. strmsg = "true";
  39. else
  40. strmsg = "false";
  42. return strmsg;
  43. }
Add the jQuery library reference in aspx page:
  1. <script src="Scripts/jquery-1.7.1.min.js"></script>
Test the page:

gridview