This article is about simple way to Add Update and Delete records using asp.net GridView using Dataset or Datatable. We shall update the database table naming (Download Demo)
Schema for UserTable is as follows
Note:I have used SqlServer 2008
For this article we are going to fill GridView by data from database.
We are going to make perform following operations on data using GridView
- Add New record into database; here data will directly be added into database table
- Update Records into database, using edit link.
- Delete Records using delete link
To make Add Update Delete in Gridview more user friendly; make sure your website is Ajax Enabled and Gridview is put under UpdatePanel. This will avoid unnecessary
postback and Gridview control will look smart.
Before we develop GridView, lets work out main functions for database operations. Create a Class File naming "ManageUsers" and add following functions one by one
Fetch Data from Database.
Update Data into Database
Insert new records into Database
Delete records from Database
In above code cnstr is the connection string for our
Now we shall make changes in GridView (Note: Make sure GridView is added on page and under updatepanel) (Download Demo)
Once we add gridview inside updatepanel, do following things
- set AutoGenerateColumns as False.
- Change the ShowFooter Flag to True
- set the DataKeyNames your column name for Id. (This field can have multiple values depending on requirement, we are going to use Id, as it is primary key of our datatable. These values are available in GridView events. We can access them using.GridView.DataKeys[e.RowIndex].Values
- Smart Navigation Tag of the GridView control, choose Add New Column
- We shall also give facility to add new records, for that we will put controls in Footer row. To do this we need to convert all above BoundField columns to template field columns. Click on the Smart Navigation Tag on the GridView choose Edit Columns, the Field’s property window will open. Select column by column from Id, include also Edit column, and select ‘Convert this field into a TemplateField’
- Now one by one we will controls to Footer of the GridView. Right click on the GridView control, select Edit Template.Column – Id: select Edit Template, choose column – Id, you can view a label placed in the ItemTemplate section and a TextBox placed in the EditItemTemplate section (Id is our Primary key and it should not be editable). In edit Item Section template, put Label. Do not add anything in Footer Template.
Column - First Name
Now again select Edit Template, choose column - First Name, Add another TextBox in the FooterTemplate section and name it as NewFirstName.
Column - Last Name
Choose column - Last Name, Add another TextBox in the FooterTemplate section and name it as NewLastName.
Column - Email Address
Choose column - Email Address, Add another TextBox in the FooterTemplate section and name it as NewEmailAddress.
Column - Login Id
Choose column - Login Id, Add another TextBox in the FooterTemplate section and name it as NewLoginId.
Column - Password
Choose column - Password, Add another TextBox in the FooterTemplate section and name it as NewPassword.
Column - Start Date
Choose column - Start Date, Add another TextBox in the FooterTemplate section and name it as NewStartDate. (Check following source view, we have added, Calender Extender of Ajax Toolkit)
Column - End Date
Choose column - End Date, Add another TextBox in the FooterTemplate section and name it as NewEndDate. (Check following source view, we have added, Calender Extender of Ajax Toolkit)
Column - Edit
Just add a link button into the FooterTemplate section, specify its CommandName property as ‘AddNew’.
Source of the Gridview control changes to following, check we have added Calender Extender for date selection. (Download Demo)
- Now we shall develop code in code behind of web page i.e. in C#. We have already developed ManageUsers Class in start. We will develop code for handing Edit,Update and Insert operations of GridView. Add events as shown in following image.Now check out following code for each event we have added for GridView.
Create object of the Class "ManageUsers"; and write function to Bind Customer details to the GridView.
Initializing the GridView control on Page load:
GridView RowEditing Event
GridView RowCancelingEdit Event
Updating Records (GridView RowUpdating Event): Update the data to the UserTable, by adding the following lines of code in the GridView’s RowUpdating eventThe above block of codes in RowUpdating event, finds the control in the GridView, takes those values in pass it to the ManageUsers class Update method. The first parameter GridView1.DataKeys[e.RowIndex].Values.ToString() will return the Id of the Customer. That is the unique id for each customer to perform update function.
Delete In GridView:
Add New Records from GridView control
This is how we can develop a simple GridView control in Asp.Net with Add Update Delete functionality.
Download Demo Code here --> Add Update Delete in Gridview Asp.net