How to Delete Record in GridView Using ASP.Net Ajax and jQuery
This article will explains 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, 'A' , 'Male', 'Demo Address', 'Agra', 4000, 3)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(2, 'B' , 'Male', 'Demo Address', 'Ghaziabad', 0, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(3, 'C' , 'Male', 'Demo Address', 'Agra', 1000, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(4, 'D' , 'Female', 'Demo Address', 'Mathura', 1000, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(5, 'E' , 'Female', 'Demo Address', 'Agra', 4000, 3)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(6, 'F' , 'Male', 'Demo Address', 'Agra', 5000, 2)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(7, 'G' , 'Male', 'Demo Address', 'Noida', 4000, 1)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(8, 'H' , 'Male', 'Demo Address', 'Agra', 4000, 5)
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(9, 'I' , 'Male', 'Demo Address', 'Noida', 5000, 1)
- After creating the table create the application. New -> Web Site.
- Provide the name “DeleteRecordfromGridViewUsingJQueryAjax”.
- Then create a 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" FontBold="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 cscode.
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>
Finished, Now you can run this page.
Top Recomemmended ASP.NET Hosting
Are you looking for the cheap ASP.NET Hosting? we recommend you choose ASPHostPortal. ASPHostPortal best, cheap, reliable Windows Hosting and ASP.NET provider. 30 days money back guarantee, High grade security system, fast network. So start your hosting with ASPHostPortal.