Using the Modal Popup Extender to build a popup search interface
This post and sample code demonstrates how to use the Modal Popup Extender (MPE) to display a popup search box, select a record from the popup, hide the popup and display details for the selected record on the page using AJAX.
We will be using the Northwind database and displaying a “Find Customer” popup. Once a Customer is selected from the search result list, we hide the MPE and refresh UpdatePanels on the page with information related to the Customer that was picked. Sample source code is attached at the bottom of the page.
The events that occur as as follows:
When we click on the “Show Customer Picker” button, we have a popup appear with the help of an MPE. This MP has a UserControl with textboxes, a search button and a GridView inside an UpdatePanel. Performing a “Search” will cause only the contents of this UpdatePanel to get refreshed. To avoid the search GridView from binding when the popup is hidden (when an async postback occurs by some other button on the page), we keep track of the MP visibility (The technique for keeping track of the MPE visibility is described here). If the MP is hidden, we use the ObjectDataSourceSelectingEventArgs.Cancel method in the ObjectDataSource Selecting event to cancel the SQL call.
When we select an employee by clicking on the “Select” link, the Selecting event of the GridView is raised. We get the primary key of the selected customer by subscribing to this event. The MP is then hidden and a custom CustomerSelected event is raised.
The Page is subscribed to the CustomerSelected event and saves the selected customer primary key to Session (You could use other techniques instead of this). It then forces the UpdatePanels of other UserControls on the page to refresh themselves. These UpdatePanels have databound controls in them that get bound by making SQL calls using the customer PK stored in Session. The page ends up showing information about the selected customer (Customer Details, Last 10 orders, To 10 Orders) on the page without a full page refresh.
The sample website project shows you how to achieve this UI in three stages (three pages). The demo in Stage1 shows how the page is laid out without using AJAX – all postbacks result in a full page refresh. In Stage2, we add the UpdatePanels to perform partial page rendering. In Stage3, we add the MP that displays the “Find Customer” popup.
Don’t forget to add a reference to the Ajax Control ToolKit before building the project.
Source Code
Mirror