Refer this example for edit
HTML
<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.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).on("click", "[id*=lnkView]", function () {
$("#lblId").html($(".Id", $(this).closest("tr")).html());
$("#txtName").val($(".Name", $(this).closest("tr")).html());
$("#txtCountry").val($(".Country", $(this).closest("tr")).html());
$("#divEdit").dialog({
title: "View Details",
buttons: {
Close: function () {
$(this).dialog('close');
},
"MyButton": {
text: "Edit",
id: "btnUpdate",
click: function () {
var user = {};
user.Id = $("#lblId").html();
user.Name = $("#txtName").val();
user.Country = $("#txtCountry").val();
$.ajax({
type: "POST",
url: "CS.aspx/UpdateUser",
data: '{user: ' + JSON.stringify(user) + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("User has been updated successfully.");
}
});
$(this).dialog('close');
}
}
},
modal: true
});
return false;
});
</script>
<script type="text/javascript">
$(function () {
$("[id*=btnUpdate]").bind("click", function () {
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-CssClass="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-CssClass="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-CssClass="Country"
ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<a href="#" id="lnkView" class="edit">Edit</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<div id="divEdit" style="display: none; width: 200px;">
CustomerId: <span id="lblId"></span>
<br />
ContactName:
<asp:TextBox ID="txtName" runat="server" />
<br />
City:
<asp:TextBox ID="txtCountry" runat="server" />
<%--<asp:Button ID="btnUpdate" Text="Update" runat="server" />--%>
</div>
</div>
</form>
</body>
</html>
Namespaces
using System.Data;
using System.Web.Script.Services;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
C#
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
[WebMethod]
[ScriptMethod]
public static void UpdateUser(User user)
{
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("Update tblUser SET Name = @Name, Country = @Country WHERE Id = @Id"))
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@Name", user.Name);
cmd.Parameters.AddWithValue("@Country", user.Country);
cmd.Parameters.AddWithValue("@Id", user.Id);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
Screenshot
