Introduction

The main idea of this article is to fetch data from database, bind the data with ASP.NET GridView control and then to perform edition functionality using ModalPopup extender with validations controls provided by ASP.NET. For editing the data we will use a web service which will return our required data in XML format and this XML we will use using JavaScript's XMLDOM parser at client side. Then from JavaScript we will fill all the required data in ModalPopup and then user will make changes as per his need. Then validate all the data using ASP.NET validations control. After successfully completing validatation we are supposed to make changes in the database and update the GridView with current data. And we will have a simple mechanism for adding new record using the same method.

To explain the above situation I will use a simple table in SQL server.

The data is in the following format:

student_id , Student_name, student_class, student_grdae, student_birthdate

Implementation

Frist, create a new WebSite Project in Visual Studio.

After successful creation of a website we will add our database using Solution Explorer

Then we will first make the table in the database created in the previous step.

Double Click on Database1.mdf in Solution explorer; it will display the Server Explorer. Right click on TABLE then add a new table as follow.

Now create a new table with the following data and make sure you set the primary key as student_id . Then save the table.

Finally we are done with our database creation; add some data in the table so that we'll get some data for testing.

Now we will move to our designing part, the .aspx page. Design your Default.aspx page by following these steps:

• Add a Label with header text
• Put a GridView control in the page.
• Set the properties of the GridView as follows: ID=studentgrid, DataKeyName=student_id, AutogenerateCoulmun=false

Now go to the source page and you will be able to see the code generated by ASP.NET. The code for the GridView will be as follows:

We are going to bind our database columns to the GridView. For this just add columns under the <asp:GridView> </asp:GridView> element and after that your code will look like so:

Now we are going to add a template field in which we will put an Edit LinkButton. Using this LinkButton we are going to show a modal popup with the data. So modify your GridView source code as follows:

At this point, the Designer in Visual Studio will look like the next figure.

We are done with 50% of code. Now we will write code in C# to bind our GridView. Make sure you added some data in the table so we can get some data in the GridView. For this purpose, you can write the following function called fillstudentdetails().

Call the above function during the PageLoad event and run your page. Make sure you are getting data from the database. The following screen shot is the output after running the above code.

Designing the ModalPopup Extender

Now we are going to design our modalpopUp. For that we are going to take one asp:panel control and inside this we can use any kind of server side controls. Users decide what controls they wish to use. In this example I am adding the following code inside ASP.NET panel. I will put a Label, a TextBox and a validation control inside the Panel.

In the above code I have used a hidden field for storing the ID, which is invisible to the user.

We are done with the design of the popup panel. Now we are going to add a ModalPopupExtender which is available in the AJAX control toolkit. Just drag and drop it together with the ScriptManager from the AJAX Extension controls in your .aspx page. Check the following code:

In the above code I set the following properties:

• PopupControlId=EditPanel (it's the name of the panel which is supposed to popup)
• TargetControlId=EditPanel (it will invoke the panel on a particular control)
• BackgroundCssClass=modalbackground (Name of CSS class for background when the modal popup appears)
• CancelControlId=btnCancel (It is used for closing the modal popup)
• OnCancelScript= HidModalPopup() (JavaScript code that will close the modal popup)

The Web Service

Now we are going to write the code for the web service. You have to add a new web service from solution explorer as follows.

Add one method which will return a single record. Add the following web method to the web service class.

The above code will return one record in XML format. We will parse this XML using JavaScript at the client side.

The following function will display the modal popup on screen after the click of the Edit LinkButton in the GridView.

The last line of the function will call the web service method passing the student_id as an argument. After the successful completion of web service, the DisplayResult function will be automatically invoked. The Displayresult function will fill the values in the modal popup's TextBox so make sure you write it and understand it correctly.

The switch case contains case statements related to COLUMN name of the database. Please make as many cases as the number of data columns and make changes accordingly.

The following code shows the JavaScript function for closing the modal popup upon clicking the Cancel button.

We are almost done with displaying the data using our modal popup. The remaining work is to link javascript function with GridView's EDIT link to open the modal popup. So we are going to add this function to GridView's Edit LinkButton using the RowDataBound event of the GridView and pass the student id of that particular row.

You will be able to see your data in the modal popup. We will write the update code in the Update button's Click event:

To edit data in the ModalPopup Extender and to save it in the database, we need to perform a PostBack from a ModalPopup Extender. Follow the following steps to make a postback from the ModalPopup Extender.

Add the following code in the PageLoad event:

Add the following JavaScript function:

The first line in the function will validate the modal popup and then will start a postback for update purposes.

Summary

I hope this article will help you to understand how to use the ModalPopUp Extender in ASP.NET.

About Mihi Soni

Hello I have done my Bachelors in Computer Application and Master of Science in (IT) From Dhirubhai Ambani Institute Gandhinagar. One of my interest is to code with Microsoft Technology ASP.NET/C#/VB/Visual C++ I love to learn new technologies,helping new users,writing articles. View complete profile here.