MSDN Magazine Launch Issue - February 15, 2008 - (Page 20) tures can be added. For instance, the ability to dismiss the dialog box by simply pressing the Esc key—a common functionality in Windows but not supported yet in the AJAX Control Toolkit—is a good idea. Before I implement any of these features, let’s briefly review the methods and properties of the ModalPopupExtender control. Figure 3 lists its properties but does not include all the properties automatically inherited from base classes. The signature of the ModalPopupExtender control class is shown here: public class ModalPopupExtender : DynamicPopulateExtenderControlBase Figure 2 Sample Web Modal Dialog Box in Action message box. At the same time, it delivers an unprecedented level of UI flexibility—after all, it’s an ASP.NET panel, so you can fill it with any combination of controls you like, and you can style it however you like. The ModalPopupExtender Control Setting up a modal popup using the AJAX Control Toolkit library is a relatively simple task. You start by defining a panel to provide the UI, and then add a button control to trigger the display of the dialog: The base class here is a library-defined extender that provides DynamicPopulate support to multiple extenders. DynamicPopulate is another extender in the AJAX Control Toolkit that replaces the markup of a DOM element with text returned by a Web service call. The ModalPopup extender has dependencies on other AJAX Control Toolkit extenders including DropShadow and DragPanel. The content of the dialog box is fully determined by a DOM subtree rooted in an element specified through the PopupControlID property. Quite often, this element will be an ASP.NET server control such as a Panel. The position of the popup is determined by the X and Y properties, but the popup will be centered horizontally if no coordinates are specified. Just as in any classic Windows dialog box, the Web modal popup Figure 3 Properties of the ModalPopupExtender Control Property BackgroundCssClass Description The CSS class linked to the host application to apply to any content underneath the modal popup when the popup is displayed. Boolean property that indicates whether the extender will automatically add a drop shadow to the modal popup. True by default. ID of the DOM element in the displayed UI that dismisses the modal popup with a Cancel action. ID of the DOM element in the displayed UI that dismisses the modal popup with an OK action. The name of a JavaScript function linked to the page to run when the modal popup is dismissed with the Cancel action. The name of a JavaScript function linked to the page to run when the modal popup is dismissed with the OK action. ID of the root element in the DOM tree to display as the content of the modal popup. ID of the embedded element that contains the header/title that will be used as a drag handle for the whole popup. Indicates whether the popup needs to be repositioned when the browser window is resized or scrolled. Feasible values belong to the ModalPopupRepositionMode enumerated type. ID of the DOM element that, when clicked, activates the modal popup. X coordinate of the top-left corner of the modal popup. Y coordinate of the top-left corner of the modal popup. Next, you set up the extender and specify the target control ID and the popup control ID: DropShadow OkCancelID OkControlID OkCancelScript OnOkScript PopupControlID PopupDragHandleControlID RepositionMode The target control ID of a ModalPopup extender is the ID of the server control that, when clicked, causes the dialog box to pop up. The popup control ID is the ID of the server control that provides the content for the dialog box. The AJAX Control Toolkit framework does not provide any default style for the dialog box. The user has to employ the visual elements in the panel to dismiss the dialog box. Figure 2 shows a sample dialog box in action. It allows confirmation and provides some information. But if you want context-sensitive dialogs where some further user interaction is required, you need to do some more work. To make the ModalPopup extender more like that of a Windows dialog box, a number of fea20 msdnmagazine Cutting Edge TargetControlID X Y http://ASP.NET http://ASP.NET
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.