Using the Modal Popup Extender to build a popup search interface

rajbk — Thu, 07 May 2009 06:30:05 GMT

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

Check Modal Popup Extender visibility from code behind

rajbk — Tue, 05 May 2009 05:41:50 GMT

AFAIK, the Modal Popup Extender has no direct way to determine its visibility state from code behind. This post describes a workaround for that.

The idea here is to wire up handlers that the MPE fires just before it’s about to show the popup (showing event) and before it’s about to hide the popup (hiding event).

In the handlers, we set the property of a HiddenField webcontrol to either ‘1’ or ‘’. We then check the Value property of this HiddenField from code behind. If the MPE has a value of 1, we know the MPE is visible.

   1: Sys.Application.add_load(applicationLoadHandler);

2:

3:

   4: //Subscribe to the show and hide events of the modal popup.

   5: //Set a hidden field some value when visible and set to empty when hidden

   6: //This hidden field is used in code behind to determine the popup visibility.

   7: function applicationLoadHandler() {

   8:     var mpeEmployeeSearch = $find('mpeEmployeeSearch');

   9:     if (mpeEmployeeSearch) {

  10:         mpeEmployeeSearch.add_showing(employeeShowingHandler);

  11:         mpeEmployeeSearch.add_hiding(employeeHidingHandler);

  12:     }

  13: }

14:

  15: function employeeShowingHandler() {

  16:     $get('hfModalVisible').value = '1';

  17: }

18:

  19: function employeeHidingHandler() {

  20:     $get('hfModalVisible').value = '';

  21: }

The MPE in this case has been assigned a BehaviorID of mpeEmployeeSearch. The HiddenField WebControl has ID (rendered in HTML) of “hfModalVisible”.

Finally, we can check the MPE visibility from code behind like so:

   1: if (!string.IsNullOrEmpty(hfModalVisible.Value))

   2: {

   3:     //Do something

   4: }

Post a comment if you know of a better way.

Raj Kaimal : Ajax Control Toolkit

Using the Modal Popup Extender to build a popup search interface

Check Modal Popup Extender visibility from code behind