Add Edit Update Records in GridView using Modal Popup in ASP.Net
In this article, I’ll explain how to Add and Edit records in ASP.Net GridView control using ASP.Net AJAX Control Toolkit Modal Popup Extender.
For this tutorial, I am using Microsoft’s NorthWind database. You can download it using the following link.
Below is the connection string to connect to the database.
Below is the HTML Markup of the page. Below you will notice that I have placed a Script Manager and an ASP.Net Update Panel on the page. Inside the Update Panel I have placed an ASP.Net GridView Control along with a Modal Popup Extender that will be used to Add or Edit the records in the GridView Control.
Binding the GridView
The code snippet provided below is used to bind the GridView Control. It simply fires a select query on the Customers table of the NorthWind Database.
On click of the add button the following method is called up, which simply sets the textboxes empty and displays the modal popup by calling the AJAX ModalPopupExtender.
The screenshot below displays the modal popup shown to the user when the Add button is clicked.
On click of the Edit button in the GridView row the following method gets called up which simply fills the textboxes with respective values.
The screenshot below displays the modal popup being shown to the user when the Edit Button is clicked.
Updating the records
The following method gets called up when the Save button the modal popup is clicked. The following method simply calls the stored procedure AddUpdateCustomer (described later).
The following stored procedure is used to Add and Update the records in the database. The stored procedure first checks if the record exists in the table. If the record exists then the table is simply updated else a new record is inserted in the database.
The screenshot below describes the data being saved into the database table. You will notice that a progress bar is being displayed until the data is updated in the database. This helps to block the user from doing multiple clicks. Below is the client side script that will help you achieve the same.
This completes the article. You can download the related source code ion VB.Net and C# using the link below.GridViewAddEditRecordsusingModalPopup.zip