Creating a Modal Popup Template Control
Download : .NET 3.5 Source Project
The ModalPopupExtender is one of my favorite AJAX extenders. It provides a slick UI experience for little overhead. The most difficult part of implementing the extender is recreating the popup panels over and over again for similar tasks.
To rectify this and create a “template” for use in our organization, I created a custom composite control that encapsulates
- Creation of the AJAXToolkit’s ModalPopupExtender,
- Creation of a Panel control,
- Styles the Panel according to pre-set styles or custom styles,
- Ties the Panel and Extender together,
- Passes various events to the common UI elements of the popup,
- Allows the popup’s events to be visible to other controls on the page.
As it stands, this is a prototype and needs quite a bit more tweaking before I’d put it into production; however, it stands as a fun project to tinker with. This will be an ongoing project and as I finish or update various aspects of the control, I’ll post up the changes. I’m also interested in feedback and ideas for improvement. 🙂
The Control’s Structure
Here you can see the properties that are configurable with the control as well as the public and private methods and events. I’ve also included the PopupStyle enumeration which prestyles the popup.
- _Element_Style (BodyStyle, ContainerStyle, etc) properties accept strings from your embeded or attached CSS.
- DefaultStyle is linked to the PopupStyle enumeration (and may lend itself to rename eventually). The example I showed above is the YUI theme which uses Matt Berseth’s YUI Css. I’ve also included a “Clean” theme similar to what we use in our projects at work. I hope to grow the collection of themes as time progresses.
- OnOkClick, OnCancelClick, and OnCloseClick methods link to the corresponding buttons on the popup and throw the like named events. By default, if these events are not tied to methods in your project, they simply close the popup window.
- BodyText and HeaderText are the two primary configuration elements of the popup.
Here’s an example including shaky arrow lines matching the properties to their relative location. For examples of the Style (ContainerStyle, BodySTyle, HeaderStyle, etc) check out Matt Berseth’s YUI example—the CSS is the same (Thanks Matt for an EXCELLENT job and template to follow!)
Using the control on your .NET page is quite simple. Remember, as with the normal ModalPopupExtender, your ModalPopupTemplate control must be in the same UpdatePanel as the TargetControl that activates it. You’ll also need to ensure that EnablePartialRendering is set to true for your ScriptManager control.
<asp:UpdatePanel ID=”updatePanel” runat=”server” UpdateMode=”Conditional”>
<asp:Button ID=”btnTrigger” runat=”server” Text=”Show Popup” />
HeaderText=”Load Product Information”
BodyText=”Are you sure you want to load the product information?”
How it Works
I’ll dig into how it works in the next posting—being somewhat late and being very sick and on some good drugs isn’t conducive to lots of writing. 🙂 If you can’t wait, download the source and go—it’s pretty well code commented.