This example shows how to edit and update records in a GridView in ASP.NET. This example is helpful in situations where an administrator needs to edit several records from the database. For demonstration, I have created a database (named Database.mdf) in which we have a table named tbl_Employee.
Table Schema used in this example
CREATE TABLE [dbo].[tbl_Employee] (
[ID] INT NOT NULL,
[Name] VARCHAR (50) NULL,
[City] VARCHAR (50) NULL,
PRIMARY KEY CLUSTERED ([ID] ASC)
);
Let's Begin
- Drop a GridView Control from the toolbox and set AutoGenerateColumns to false.
- Add the Columns Collection (tag) that manages the collection of column fields.
- Add TemplateField inside the Columns Collection that is used to display custom content in a data-bound control.
- Add an ItemTemplate in the TemplateField that specifies the content to display for the items in a TemplateField.
- Add an EditItemTemplate in the TemplateField that specifies a custom user interface (UI) for the item in edit mode.
- Set the Command name property to Edit in the Edit button, Update in the Update button and Cancel in the Cancel Button depending on their respective Events.
- Add OnRowEditing, OnRowUpdating and OnRowCancelingEdit events to the GridView.
Default.aspx Code:
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="6" OnRowCancelingEdit="GridView1_RowCancelingEdit"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btn_Edit" runat="server" Text="Edit" CommandName="Edit" />
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="btn_Update" runat="server" Text="Update" CommandName="Update"/>
<asp:Button ID="btn_Cancel" runat="server" Text="Cancel" CommandName="Cancel"/>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lbl_ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lbl_Name" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txt_Name" runat="server" Text='<%#Eval("Name") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City">
<ItemTemplate>
<asp:Label ID="lbl_City" runat="server" Text='<%#Eval("City") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txt_City" runat="server" Text='<%#Eval("City") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#663300" ForeColor="#ffffff"/>
<RowStyle BackColor="#e7ceb6"/>
</asp:GridView>
</div>
</form>
Default.aspx.cs Code
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
//Connection String from web.config File
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
SqlConnection con;
SqlDataAdapter adapt;
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
ShowData();
}
}
//ShowData method for Displaying Data in Gridview
protected void ShowData()
{
dt = new DataTable();
con = new SqlConnection(cs);
con.Open();
adapt = new SqlDataAdapter("Select ID,Name,City from tbl_Employee",con);
adapt.Fill(dt);
if(dt.Rows.Count>0)
{
GridView1.DataSource = dt;
GridView1.DataBind();
}
con.Close();
}
protected void GridView1_RowEditing(object sender, System.Web.UI.WebControls.GridViewEditEventArgs e)
{
//NewEditIndex property used to determine the index of the row being edited.
GridView1.EditIndex = e.NewEditIndex;
ShowData();
}
protected void GridView1_RowUpdating(object sender, System.Web.UI.WebControls.GridViewUpdateEventArgs e)
{
//Finding the controls from Gridview for the row which is going to update
Label id=GridView1.Rows[e.RowIndex].FindControl("lbl_ID") as Label;
TextBox name = GridView1.Rows[e.RowIndex].FindControl("txt_Name") as TextBox;
TextBox city = GridView1.Rows[e.RowIndex].FindControl("txt_City") as TextBox;
con = new SqlConnection(cs);
con.Open();
//updating the record
SqlCommand cmd = new SqlCommand("Update tbl_Employee set Name='"+name.Text+"',City='"+city.Text+"' where ID="+Convert.ToInt32(id.Text),con);
cmd.ExecuteNonQuery();
con.Close();
//Setting the EditIndex property to -1 to cancel the Edit mode in Gridview
GridView1.EditIndex = -1;
//Call ShowData method for displaying updated data
ShowData();
}
protected void GridView1_RowCancelingEdit(object sender, System.Web.UI.WebControls.GridViewCancelEditEventArgs e)
{
//Setting the EditIndex property to -1 to cancel the Edit mode in Gridview
GridView1.EditIndex = -1;
ShowData();
}
}
Final Preview:
![Edit and Update Record in GridView]()
I hope you like it. Thanks.