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 Recommended ASP.NET Hosting
ASPHostPortal.com is the leading provider of Windows hosting and affordable ASP.NET, ASPHostPortal proudly working to help grow the backbone of the Internet, the millions of individuals, families, micro-businesses, small business, and fledgling online businesses. Only $1.00 Month You can develop your bussines. ASPHostPortal has ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2015, .NET 5/ASP.NET 4.5.2, ASP.NET MVC 6.0/5.2, Silverlight 6 and Visual Studio Lightswitch, ASPHostPortal guarantees the highest quality product, top security, and unshakeable reliability, carefully chose high-quality servers, networking, and infrastructure equipment to ensure the utmost reliability.