Database
I have made use of the following table Customers with the schema as follows.
I have already inserted few records in the table.
You can download database SQL from here.
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.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=lnkEdit]").click(function () {
$("[id*=GridView1] tr").find(".label").show();
$("[id*=GridView1] tr").find(".textbox").hide();
$("[id*=GridView1] tr").find("[id*=lnkUpdate]").hide();
$(this).closest("tr").find(".label").hide();
$(this).closest("tr").find(".textbox").show();
$(this).closest("tr").find("[id*=lnkUpdate]").show();
return false;
});
});
</script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border:1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Label ID="lblId" runat="server" Text='<%# Eval("CustomerId") %>' CssClass="label" />
<asp:TextBox ID="txtId" runat="server" Text='<%# Eval("CustomerId") %>' Style="display: none;"
CssClass="textbox"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' CssClass="label" />
<asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' Style="display: none;"
CssClass="textbox"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country">
<ItemTemplate>
<asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Country") %>' CssClass="label" />
<asp:TextBox ID="txtCountry" runat="server" Text='<%# Eval("Country") %>' Style="display: none;"
CssClass="textbox"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" Text="Edit" runat="server" />
<asp:LinkButton ID="lnkUpdate" Text="Update" Style="display: none;" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Namespaces
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateGridView();
}
}
private void PopulateGridView()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection conn = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers", conn))
{
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
}
}
}
Screenshot
