Description:
In this article, I will explain how to update
and delete record from gridview using Jquery and Ajax.
If we want to perform update and delete
operation without refreshing the page, we can use Jquery and Ajax.
Ajax used to connect with
the server side without reloading the page.
While calling AJAX method through JQuery,
the method should be static and it should be web method.
In the below program, I am going to update
and delete the gridview records using Ajax method.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".update").click(function () {
var row = $(this).closest("tr");
var pID = $(this).attr("id");
var Name = $(".text1", row).val();
var Age = $(".text2", row).val();
if (confirm("Do you want to update this
record?"))
{
$.ajax({
type: "POST",
url: "AJAXCRUD.aspx/UpdateRecord",
data: "{'name':
'" +
Name + "','age':
'" +
Age + "','ID':
'" +
pID
+"' }",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d == true) {
alert("Record
successfully updated!!!");
}
else
alert("Updation
Failure!!!");
}
});
}
return false;
});
$(".delete").click(function () {
var row = $(this).closest("tr");
var pID = $(this).attr("id");
if (confirm("Do you want to delete this
record?"))
{
$.ajax({
type: "POST",
url: "AJAXCRUD.aspx/DeleteRecord",
data: "{'ID':
'" +
pID + "'
}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d == true) {
alert("Record
successfully deleted!!!");
window.location.reload();
}
else
alert("Deletion
Failure!!!");
}
});
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Name") %>' class="text1">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Age">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("Age") %>' class="text2">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<a href="#" class='update' id='<%# Eval("ID") %>'>
<input id="Submit1" type="submit" value="Update" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<a href="#" class='delete' id='<%# Eval("ID") %>'>
<input id="Submit1" type="submit" value="Delete" />
</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("Data Source=----;Initial
Catalog=dbname;User ID=uid;Password=pwd;");
SqlCommand cmd = new SqlCommand("select Id, Name, Age
from tablename ",con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
[System.Web.Services.WebMethod]
public static bool UpdateRecord(string name, string age, string ID)
{
try
{
SqlConnection con = new SqlConnection("Data
Source=----;Initial Catalog=dbname;User ID=uid;Password=pwd;");
SqlCommand cmd = new SqlCommand("update tablename set
Name='" +
name + "'
, Age='" +
age + "'
where Id='" +
ID + "'
",
con);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
return true;
}
catch (Exception ex)
{
return false;
}
}
Update a record in gridview using Jquery and Ajax,
Delete a record in gridview using Jquery , Update and Delete a record using
Jquery and Ajax in gridview, Update gridview row using Jquery, Delete gridview
row using Jquery, Remove rows from gridview using Jquery.
No comments:
Post a Comment