Home > .net 2.0, .net 3.5, AJAX, c#, JavaScript, LINQ, Microsoft, Visual Studio 2005, Visual Studio 2008 > Creating a Modal Popup Template Control

Creating a Modal Popup Template Control

November 5, 2007

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.

ModalPopupTemplate with Matt Berseth's YUI CSS

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

The ModalPopupTemplate's class diagram.

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!)

Elements of the ModalPopupTemplate

Control Usage

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”>

<ContentTemplate>

<asp:Button ID=”btnTrigger” runat=”server” Text=”Show Popup” />

<cc1:ModalPopupTemplate

ID=”ModalPopupTemplate1″

runat=”server”

DefaultStyle=”YUI”

HeaderText=”Load Product Information”

BodyText=”Are you sure you want to load the product information?”

TargetControlId=”btnTrigger”

OnOkClick=”LoadDataTable” />

</ContentTemplate>

</asp:UpdatePanel>

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.

kick it on DotNetKicks.com

About these ads
  1. Ted Taylor
    February 28, 2008 at 4:21 pm | #1

    Hi,

    From your excellent description, this is EXACTLY what I am looking for. Unfortunately, the links for the source projects are not working (404 errors).

    Could you update the links?

  2. February 28, 2008 at 6:42 pm | #2

    @Ted-

    That’s odd, I’ll republish the links out there tonight when I get home. Thanks!

  3. February 29, 2008 at 1:10 pm | #3

    @Ted-

    Updated; sorry about that.

  4. Dave
    June 3, 2008 at 3:35 pm | #4

    The source code links seem to be broken again (receiving “Application Firewall Alert” messages).

  5. June 3, 2008 at 6:31 pm | #5

    Fixed, I think, though still investigating. It appears that “Security Guard” is some new feature with my hosting provider. Freaking stellar. Thanks for letting me know!

    -dl

Comments are closed.
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: