How to display Master-Detail Data with the ModalPopup Extender and GridView

IntroductionHere I will explain you to display Master details using AJAX ModalPopup Extender and GridView.

Description
In the earlier days , we have often used the combination of GridView and DetailView to display the Master-Details. Similarly, developers have used pop-ups to show the similar scenarios where a user clicks on a gridview row and the details are displayed in a pop-up window.

Here I am exploring the ModalPopup extender control which allows a page to display contents in a modal manner. Here we will display Order-Customer scenario using the ModalPopup extender. For demonstration purpose, I am using Orders and Customers table. Initially we fetch and display data from Orders table in a GridView. The CustomerCode will be a link which enables to view customer's detail using ModalPopup extender.

First, Create Orders and Customers table in your database and insert data in it. Or you can copy the following SQL script shown below and run into your database.




Lets Design our .aspx page, First Add ScriptManagger and UpdatePanel controls from the toolbox. After that Place a GridView control inside the UpdatePanel. Now Add SqlDataSource from toolbox Data Tab and configure SqlDataSource using 'Configure Data Source' wizard. It is already explain in How to Configure SqlDataSource. and assign it's ID to the GridView DataSourceID.

Now, We add columns to the GridView. Here we used Linkbutton in TemplateField for CustomerCode
field to display as a link. When you click on the link, it will display the Customer details.

We will now add a ModalPopup Extender below the GridView. The ModalPopup Extender has a number of properties that are as follows:
  • TargetControlID - The ID of the element that activates the modal popup.
  • PopupControlID -  The control that will be displayed as the modal popup.
  • PopupDragHandleControlID - The ID of the popup header which will be used to drag the modal popup on the page.
To know more about the other properties of the ModalPopup Extender, check this link. The HTML markup of the .aspx page is as shown below




The divPopup also contains the GridView control to display customer details. If you have to display only read-only data, you can use a lighter control like the Repeater Control instead of GridView Control.

Remember one thing, whenever you are use Ajax controls, you have to use ScriptManager control before it. I know you are thinking, why it is necessary. It is because  the ScriptManager control manages all ASP.NET Ajax resources on a page. This includes downloading Microsoft Ajax Library scripts to the browser and coordinating partial-page updates that are enabled by using UpdatePanel controls. Otherwise, it will give you an error like The Control with ID 'UpdatePanel1' requires an ScriptManager on the page.


In the above code you can see that, we include an OnClick event on LinkButton for invoke the ModalPopup and populate the GridView2 with the customer details. After that, add the following code in the event handler in code behind page.




In the .aspx page I gave one button name btnShowModalPopup but that button is not necessary, Here we are triggering popup by calling Show() function in LinkButton click codebehind. But if we didn't given that TargetControlID to ModalPopupExtender, it will throw error.

So that was the ModalPopup Extender for you. We can also used this control to handle common scenarios like editing GridView data or display images in pop-ups. I hope this article was useful for you. For any query just comment below this post. I will happy to help you.... ThankYou !

Output


1 comment:

  1. very useful and nice for beginners like me

    ReplyDelete