Update, Delete, Edit GridView in Asp.Net
Gridview :: Editable, Updateable and
Deleteable in ASP.NET.
The process of making GridView
Editable, Updateable and Deleteable is almost used in the entire ASP.NET
project. So, making GridView Editable, Updateable and Deleteable is one
of the most important aspects according to any ASP.NET project.
Let’s create a simple demonstration to
understand the concept of making GridView Editable, Updateable and Deleteable
in much better manner.
In order to see it practically you
just need to follow the following steps.
Step1: –
Create a simple ASP.NET Web Application for that
just open Visual Studio >> go to >> File >> New >> Project >> Web >> Select
ASP.NET Empty Web Application.
Step2: - Now, simply just add a Web Form to your ASP.NET
Empty Web Application for that just go to >> Solution Explorer >>
Right Click on the project name >> Add >> New Item >> Select Web Form.
Now, simply just drag and drop GridView to your Web Form and allow
the below properties to true.
1.
Allow
AutoGenerateEditButton to True.
2. Allow AutoGenerateDeleteButton
to True.
Now, as soon as you set the above two properties you will see the
GridView like below diagram.
Step3: - Now, let bind the GridView with Data for
that just add the below
code snippet in to your WebForm.aspx.cs file.
|
//Below variable holds the Connection String.
string str = ConfigurationManager.AppSettings["Connect"];
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridViewData();
} }
//Created a GridViewData method to bind data
to GridView
//from the SQL Server DataBase Table.
public void GridViewData()
{
SqlConnection con = new SqlConnection(str);
con.Open();
SqlCommand com = new SqlCommand();
com.CommandText = "select * from Book";
com.Connection = con;
com.ExecuteNonQuery();
SqlDataAdapter adap = new SqlDataAdapter(com);
DataSet ds = new DataSet();
adap.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
|
Step4: –
This is the most important step while making GridView
Editable, Updateable and Deleteable.
Now, simply just add the below Events of the GridView control in
to your
Web Application.
1. OnRowEditing.
2. OnRowCancelingEdit.
3. OnRowUpdating.
4. OnRowDeleting.
Step5: - now, just add the below code snippet to make necessary
changes on the respective events of the GridView control.
1.
OnRowEditing add the below code snippet.
|
protected void GridView1_RowEditing(object sender,
GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
GridViewData();
}
|
2. OnRowCanelingEdit add the
below code snippet.
|
protected void GridView1_RowCancelingEdit(object
sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
GridViewData();
}
|
2.
OnRowDeleting add the below code snippet.
|
protected void GridView1_RowDeleting(object
sender, GridViewDeleteEventArgs e)
{
//The below line of code will hold the Cells[1] data of th GridView
Control.
string id = GridView1.Rows[e.RowIndex].Cells[1].Text;
SqlConnection con = new SqlConnection(str);
con.Open();
SqlCommand com = new SqlCommand();
com.CommandText = "delete from Book where Book_Id =
'"+id+"'";
com.Connection = con;
com.ExecuteNonQuery();
GridViewData();
}
|
3.
OnRowUpdating add the below code snippet.
|
protected void GridView1_RowUpdating(object sender,
GridViewUpdateEventArgs e)
{
string id = ((TextBox)GridView1.Rows[e.RowIndex].Cells[1].Controls[0]).Text;
string bookname = ((TextBox)GridView1.Rows[e.RowIndex].Cells[2].Controls[0]).Text;
string author =
((TextBox)GridView1.Rows[e.RowIndex].Cells[3].Controls[0]).Text; string price =
((TextBox)GridView1.Rows[e.RowIndex].Cells[4].Controls[0]).Text; string quantity
= ((TextBox)GridView1.Rows[e.RowIndex].Cells[5].Controls[0]).Text; SqlConnection
con = new SqlConnection(str); con.Open(); SqlCommand com = new SqlCommand();
com.CommandText = "update Book set Book_Name='" + bookname + "',Book_Author='" +
author + "',Book_Price='" + price + "',Book_Quantity='" + quantity + "' where
Book_Id= '" + id + "'"; com.Connection = con; com.ExecuteNonQuery();
GridViewData(); }
|
Note: - You can
modify your code according to your requirements.
Step6: - Now, let’s run your Web Application and see the respective
results.
Let’s first see the result for deleting.
The above diagram is my output of the loaded GridView and note
that I am going to delete the circled row data from the GridView
control.
Now, as soon as you click on the delete
link will see the result like below diagram.
In the above result of diagram you can see that the data has been deleted.
Similarly, let’s see the result for updating the below circled row
data in the GridView control.
Now, as soon as you click on the edit link you will see something like below
diagram.
Now, let’s modify the Book_Author Name as Kalim Shaikh and click on the Update
link and see whether the data is updated or not.
In the above output diagram you can clearly see that now the Book_Author
name is modified to Kalim Shaikh.
|