Post
Ask Question

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

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>  
  23.   
  24.         </div>  
  25.     </form>  
  26.   
  27.      <script src="Scripts/jquery-1.7.1.min.js"></script>  
  28.   
  29.     <script type="text/javascript">  
  30.   
  31.         function DeleteConfirmbox(val) {  
  32.   
  33.             // confirm meg check for delete  
  34.             var result = confirm('Are you sure delete Emp Record?');  
  35.             if (result) {  
  36.   
  37.               // this is for get hdnvalue id  
  38.                 var value = val.replace("btnDelete", "hdnEmpId");  
  39.                                  
  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.                     }  
  50.   
  51.                       
  52.                 });  
  53.                   
  54.                 return false;  
  55.             }  
  56.         }  
  57.   
  58.         // function OnSuccess  
  59.         function OnSuccess(response) {  
  60.             return false;  
  61.             if (response.d == 'true')  
  62.             {  
  63.                   
  64.                   
  65.             }  
  66.              
  67.         }  
  68.     </script>  
  69.   
  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. }  
  8.   
  9. protected void Bindgv()  
  10. {  
  11.     SqlConnection con = new SqlConnection("data source=LENOVO;initial catalog=practise;UID=sa;PWD=connect;");  
  12.   
  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();  
  21.   
  22. }  
  23.   
  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;");  
  29.   
  30.     SqlCommand cmd = new SqlCommand("delete from tbl_Emp where EmpId= @Empid", con);  
  31.   
  32.     con.Open();  
  33.     cmd.Parameters.AddWithValue("@Empid", empid);  
  34.     int retval = cmd.ExecuteNonQuery();  
  35.     con.Close();  
  36.   
  37.     if (retval == 1)  
  38.         strmsg = "true";  
  39.     else  
  40.         strmsg = "false";          
  41.       
  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

 


Similar Articles