Smum County Modal Form for ASP.NET

• Download source files and demo - 620 Kb

Introduction

The ModalPopupExtender control provided by the ASP.NET AJAX Control Toolkit allows the display of content in a div panel that floats in the middle of the page and prevents the user from interacting with the rest of the page until the div panel has been closed, thus creating a modal form type of entry on a web page. This is really useful technology but I wanted to make a few improvements in this modal form-like interface.

Specifically I wanted to:

• Create a panel like control into which I can place content which will be displayed in the modal form without having to include a separate ModalPopupExtender control on the page.
• Standardize the look of the modal form by automatically including a form-like header when the form is displayed and allowing both the header and content to be styled using stylesheets.
• Allow the modal form to be dragged around the page like a real modal form.
• Provide the modal form with a more opaque drop shadow than the ModalPopupExtender normally provides.

ModalForm Control

To start, since I want this control to be a simple container into which I can drop other controls and content, it makes the most sense to create this control by inheriting from the Panel server control.

[ToolboxData("<{0}:ModalForm runat="server">")]
public class ModalForm : Panel
{
    public ModalForm() : base()
    {}
}

Just doing this gives us all the functionality of the Panel control meaning we have a container into which we can drop other stuff. Now we need to make it look like a real modal form. This means creating a header with a title and a close icon that can be clicked in order to close the form. This is done during the Render of the control by the CreateContainerControls routine.

    
private Panel CreateContainerControls()
{
    Panel header = new Panel();
    header.ID = "Header";   
    _extender.PopupDragHandleControlID = header.ID;   
    header.CssClass = this.HeaderCss;

    Panel title = new Panel();

    //Add title text to title panel.
    LiteralControl titleText = new LiteralControl(this.Title);
    title.Controls.Add(titleText);

    //Place title on left of header panel.
    title.Style.Add("float", "left");
    header.Controls.Add(title);

    //Only create a close image panel if a close image has been specified.
    HtmlImage imageButton = null;
    if (CloseImageUrl != "")
    {
        Panel closeImage = new Panel();

        //Add image to image panel.
        imageButton = new HtmlImage();
        imageButton.ID = ID + "_Button";
        imageButton.Border = 0;
        imageButton.Src = GetCloseImageUrl();
        imageButton.Style.Add("cursor", "pointer");

        //Both the image and the rollover image will be saved as attributes of the image to facilitate
        //rollover.
        imageButton.Attributes.Add("image", Path.GetFileName(CloseImage));
        imageButton.Attributes.Add("rolloverImage", Path.GetFileName(CloseRolloverImage));
        imageButton.Attributes.Add("onMouseOver", "RolloverImage(event);");
        imageButton.Attributes.Add("onMouseOut", "RolloverImage(event);");

        closeImage.Controls.Add(imageButton);

        //Place image on right of header panel.
        closeImage.Style.Add("float", "right");
        closeImage.CssClass = CloseImageCss;
        header.Controls.Add(closeImage);
    }

    Panel content = new Panel();
    content.CssClass = this.ContentCss;

    //Move all the children of the base panel to the children of the content panel.
    //Note as a child control is added to content, it is automatically removed from the base panel.
    int numChildren = this.Controls.Count;
    //Start at 2 since the popup panel and the modal popup extender will be 0 and 1.
    for (int i = 2; i < numChildren; i++)
        content.Controls.Add(this.Controls[2]);

    //Add the header and content panels to the popup panel.
    _popup.Controls.Add(header);
    _popup.Controls.Add(content);

    //Now that all controls are in their proper places, create the cancel javascript for the CancelControlId.
    if (CloseImageUrl != "" && CancelControlId != "")
        imageButton.Attributes.Add("onClick", GetCloseScript());

    //Make sure this panel is hidden to begin.
    this.Style.Add("display", "none");

    return header;
}

In the above, I'm creating a header panel at the top of the ModalForm container panel with a content panel below this. The header panel contains two other panels, one for the caption which is floated to the left and another for the image that is used to close the modal form which is floated to the right. The header, close image, content, and container panels can all have different stylesheet classes which gives the developer full control over the look of the modal form. Those controls that were children of the ModalForm container panel when the control was designed are moved to the new content panel. Note that I am attaching a javascript function to the onClick event of the image that will close the form. This function will simply force a click on whatever control has been setup in the ModalPopupExtender to close the modal form.

Setting the PopupDragHandleControlID property of the modal popup extender control will cause the modal popup to be draggable. The creation of the class level _popup and _extender variables used above will be discussed in the next section.

Creating the ModalPopupExtender On the Fly

So far, we've got a panel control that mimics the look of a modal form but it doesn't actually have any of the modal form functionality. This is supplied by connecting the ModalForm control to a ModalPopupExtender control that is created on the fly by overriding the control's OnInit and CreateChildControls routines.

protected override void OnInit(EventArgs e)
{
    EnsureChildControls();

    base.OnInit(e);
}


protected override void CreateChildControls()
{
    base.CreateChildControls();

    // Create the extender and the popup control panel to act on.
    _extender = new ModalPopupExtender();
    _extender.ID = ID + "_ModalPopupExtender";

    _popup = new System.Web.UI.WebControls.Panel();
    _popup.ID = ID + "_Popup";

    //Pass on ModalPopup extender properties of this control to the extender.
    _extender.TargetControlID = ActivateControlId;
    _extender.BackgroundCssClass = BackgroundCss;
    _extender.CancelControlID = CancelControlId;
    _extender.OkControlID = OkControlId;
    _extender.DropShadow = DropShadow;
    _extender.OnOkScript = OnOkScript;
    _extender.PopupControlID = _popup.ID;

    //Pass on panel properties of this control to the popup panel.
    _popup.Width = this.Width;
    _popup.CssClass = this.CssClass;
    this.CssClass = "";

    if (!this.DesignMode)
    {
        Controls.AddAt(0, _popup);
        Controls.AddAt(0, _extender);
    }
}

The OnInit override calls EnsureChildControls which forces the CreateChildControls to run. This routine then simply instantiates the ModalPopupExtender control and popup panel on which the modal popup extender will operate. It sets the appropriate properties of these controls, and adds them to the Controls collection of the ModalForm control. Note that all of the properties you can set on the ModalPopupExtender control are exposed as properties of the ModalForm control which are then passed on to the ModalPopupExtender control at this point.

Fixing Drag

There is a bug in the drag functionality of the ModalPopupExtender, at least in the version of the toolkit I used to create this demo. When the modal popup is dragged and then released, the popup snaps back to its original startup position. To fix this, I made the following changes to the DragPanelExtender which is used to give the modal popup drag functionality. In the onDragEnd method of the FloatingBehavior.js file, insert the line below that is in bold:

    // void onDragEnd(Canceled)
    this.onDragEnd = function(canceled) {
        canceled = false;
        if (!canceled) {
            var handler = this.get_events().getHandler('move');
            if(handler) {
                var cancelArgs = new Sys.CancelEventArgs();
                handler(this, cancelArgs);
                canceled = cancelArgs.get_cancel();
            }            
        }

etc....

If the DragPanelExtender is used elsewhere in your web site this change may prevent the drag panel extender from working as you expect but for our purposes with the modal popup extender, this works.

The ModalPopupExtender initially displays the modal form directly in the center of the visible browser window and keeps it there when the browser window is scrolled or resized. Since our modal form is draggable, we can move it away from this initial display position. However, when the browser window is resized or scrolled, the modal form will be put right back in the middle of the browser window. To keep this from happening, we need to make a small change to the ModalPopupExtender control in order to disable this functionality. The change must be made in the ModalPoupBehavior.js javascript file which performs client side functionality for the ModalPopupExtender control. Specifically, the bolded lines below from the _attachPopup function, which add a client side handler to the resize and scroll events of the browser window, must be commented out:

_attachPopup : function() {
    if (this._DropShadow && !this._dropShadowBehavior) {
        this._dropShadowBehavior = $create(AjaxControlToolkit.DropShadowBehavior, {}, null, null, this._foregroundElement);
        this._dropShadowBehavior.set_Opacity(.25);
        this._dropShadowBehavior.set_Width(10);
    }

    //$addHandler(window, 'resize', this._resizeHandler);
    //$addHandler(window, 'scroll', this._scrollHandler);
    this._windowHandlersAttached = true;
},

In addition, the bolded lines below from the _detachPopup function, which detaches the resize and scroll event handlers from the browser window, must be commented out:

_detachPopup : function() {
    if (this._windowHandlersAttached) {
        if (this._scrollHandler) {
            //$removeHandler(window, 'scroll', this._scrollHandler);
        }

        if (this._resizeHandler) {
            //$removeHandler(window, 'resize', this._resizeHandler);
        }
    }

    if (this._dropShadowBehavior) {
        this._dropShadowBehavior.dispose();
        this._dropShadowBehavior = null;
    }
},

Altering the Drop Shadow

The ModalPopupExtender natively allows you to specify that the modal form should appear with a drop shadow but the default shadow it uses is a solid black which looks pretty bad. By tweaking the _attachPopup function in the modalbehavior.js file one can easily alter the characteristics of the drop panel that is attached to the modal form. I added the bolded lines below to this routine in order to give the drop shadow an opacity of 25% and a width of 10 pixels.

_attachPopup : function() {
    if (this._DropShadow && !this._dropShadowBehavior) {
        this._dropShadowBehavior = $create(AjaxControlToolkit.DropShadowBehavior, {}, null, null, this._foregroundElement);
        this._dropShadowBehavior.set_Opacity(.25);
        this._dropShadowBehavior.set_Width(10);
    }

    //$addHandler(window, 'resize', this._resizeHandler);
    //$addHandler(window, 'scroll', this._scrollHandler);
    this._windowHandlersAttached = true;
},

In Conclusion

The ModalForm control can be used in a web application at any point where you might choose to use a modal form in a WinForms application. For example, it could be used where a MultiView control may normally be used, in order to display a data entry form to the user. Or it may be used to create a more user friendly and attractive message box. In any case, I think this project shows how those controls included in the ASP.NET AJAX Control Toolkit can be extended and modified in order to meet the needs of your application.

Demo Notes

Web.config, in the demo project, is setup to use the Basic theme which has an associated stylesheet and theme defined in the App_Themes folder. This is what gives the modal form its look. Web.config is also setup to recognize the 'ajaxtoolkit' prefix for the AJAX Control Toolkit assembly and the 'sc' prefix for the SmumCounty.WebControls assembly.

Since the ModalForm control creates and uses a ModalPopupExtender control from the ASP.NET AJAX Control Toolkit this control may only be used with an AJAX enabled web project and the form on which the control resides must also host a ScriptManager control.

The javascript file modalform.js has been included as embedded resources in the project and thus does not need to be distributed as a separate javascript file on the website that uses the ModalForm control.

The demo solution included above includes a project called AjaxControlToolkit. This is the ASP.NET AJAX Control Toolkit but with many of the controls removed to make the download smaller and with changes to the ModalPopupExtender as indicated above.

Revision History

• November 15, 2006 – Created
• July 23, 2007 – Revised to work with latest AJAX Control Toolkit
• August 1, 2007 – Fixed small bug related to having more than one Smum Modal Form on a page.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 35 (Total in Forum: 35) (Refresh) FirstPrevNext

modal background hidden in firefox David Oabile 16:03 12 Mar '08   i Love it! I use vs 2008 and had to convert you demo project to the liking of vs 2008. The demo works fine in IE but, it's not working in Firefox. While display modal, the page Background get hiddend. Any suggestion on how to solve this. Thanks for sharing your knowledge David Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: modal background hidden in firefox Lou Flees 11:54 17 Mar '08   After three hours I finally figured out what the problem is. It's very simple. Remove the "float: left;" line from the App_Themes\Basic\Basic.css file. This is causing the stylesheet of the outer div to not be applied to the inner div in Firefox. This style attribute of the content div doesn't seem to be necessary so you shouldn't miss it. Sign In·View Thread·PermaLink How to make the Popup stay after a postback salsagirl 5:45 29 Oct '07   Hi! I love this control. I would really like to use it to display a GridView, but the problem is, the Popup goes away when you click on an Edit button to edit a row. Is there any way to make the Popup stay after a postback and only close when an OK or Cancel button is clicked? Sign In·View Thread·PermaLink 2.00/5 (2 votes) Re: How to make the Popup stay after a postback Lou Flees 4:31 30 Oct '07   I've used this control with a gridview control and it works well. You have to call the Show method of the smum modal form on the postback. That should get the modal form to pop back up when the page re-renders. Sign In·View Thread·PermaLink 4.40/5 (2 votes) Your control do not work with updatePanel?? denzzo 16:52 27 Oct '07   I'm using your control now, it works well, but when i try to add an updatepanel inside you control it's get this error: Cannot unregister UpdatePanel with ID 'up_add' since it was not registered with the ScriptManager. This might occur if the UpdatePanel was removed from the control tree and later added again, which is not supported. Parameter name: updatePanel Sign In·View Thread·PermaLink Re: Your control do not work with updatePanel?? Lou Flees 4:38 30 Oct '07   I think this is a result of that part of the code in the CreateContainerControls routine that moves the child controls from the modal form panel to a new content panel that has been created on the fly. I guess this is not allowed for an update panel. I don't have a solution for this at this time except to suggest wrapping the entire modal form with an update panel. Sign In·View Thread·PermaLink 2.00/5 (1 vote) How to show this modal control from javascript code denzzo 19:07 23 Oct '07   this control's great. But the problem is i don't know how to show this modal control from javascript code. I've tried: $find("ContactForm_ModalPopupExtender").show(). but it didn't work Sign In·View Thread·PermaLink Re: How to show this modal control from javascript code Lou Flees 3:45 24 Oct '07   The ActivateControl attribute of the ModalForm control indicates the server control that when activated will bring up the modal form. I use the cmdContactInfo link button for this in the demo. If you want to bring up the modal form from javascript without clicking the ActivateControl, the easiest way I've found is to simulate a click of this control within javascript. In the demo, this would consist of finding the cmdContactInfo element in the document and executing the click method on this element. eg. document.getElementById('cmdContactInfo').click(); Of course, you need to be aware that the client side id of the activate control will likely not be the id of the server side control, depending on how complex your form is. If you want to be able to bring up the modal form but you don't want to show the activate control on the form, you must still have a server side control that serves as the activate control but you can hide this control using a stylesheet. eg. <asp:Button runat="server" ID="cmdContactInfo" Text="Edit Contact" style="display:none"/> Even though the element doesn't show on the form on the client side, you can still bring up the modal form by clicking this element in javascript: document.getElementById('cmdContactInfo').click(); Hope that helps. Sign In·View Thread·PermaLink Re: How to show this modal control from javascript code Lou Flees 3:50 24 Oct '07   My last post was cutoff because I neglected to ignore html tags when submitting. Here's the rest: eg. <asp:Button runat="server" ID="cmdContactInfo" Text="Edit Contact" style="display:none"/> Even though the server side control doesn't show on the client side, you can still use it to bring up the modal form as before. eg. document.getElementById('cmdContactInfo').click(); Hope that helps. Sign In·View Thread·PermaLink Child Control's event fires twice carternc 6:25 1 Oct '07   First let me say that this is a really nice adaptation of the Modal Form. I am experiencing an issue with a child control (added dynamically) of the modal form panel. The child control's event handler is fired twice. The first time, everything is in order...the full page lifecyle events occur and then the event hander is fired. However, it appears that the CreateContainerControls() method (called during the Render event handler) is causing the control's event handler to fire again. This appears to be the result of moving the control. I do have the appropriate control state each time the handler is called. It's just that it shouldn't be called twice. Moving the CreateContainerControls() method to an earlier page lifecyle event handler remedies the firing twice issue, but it presents another issue -- the control state is not correct in the control's event handler. Any thoughts or suggestions would be greatly appreciated. Sign In·View Thread·PermaLink 2.00/5 (2 votes) Close image not working msmyth 9:23 10 Aug '07   I have added this modal popup control to a project that I am working on. I call the popup control from another control and everything is working great except, the image close button on the right side is not working. When you click on the close image (x) the popup form just shifts in location instead of closing. But the closes fine when you cancel out of the form. Any ideas where I should look? Sign In·View Thread·PermaLink Re: Close image not working Lou Flees 2:54 17 Aug '07   What browser are you using? The click event of the close image calls the click event of the control you've specified in the CancelControlID. This is done in the ModalFormClose javascript function. You might want to put some alert messages in there to see exactly what it's doing. It sounds like the click of the cancel control isn't getting called and instead the drag of the form is being initiated because you clicked on the form header. Hope that helps. Sign In·View Thread·PermaLink Multiple Panel Control on a form aibo 3:15 29 Jul '07   1- I am having serious issue while droping multiple panel controls on the form. It doesn't get compiled and debugging it says FindControls method return multiple controls. 2-If you use panel control in a updatepanel control it does't render properly. Waiting for your reply... tmd Sign In·View Thread·PermaLink Re: Multiple Panel Control on a form Lou Flees 12:23 29 Jul '07   I don't understand exactly what you're trying to do. When you say multiple panel controls are you talking about multiple Smum Modal Forms on an aspx page or do you mean multiple panel controls on a Smum Modal Form control? Can you send me the markup of the aspx page you're having problems with? Sign In·View Thread·PermaLink Re: Multiple Panel Control on a form Lou Flees 12:14 1 Aug '07   I've discovered the problem. In the CreateContainerControls routine for the ModalForm class, I create a Header panel and give this an ID of 'Header'. If you add two modal forms to a page, you'll then have two controls with the same ID which is not allowed. I should have done this when assigning the ID to insure uniqueness: header.ID = ID + "_Header"; I'll update the demo code. Sign In·View Thread·PermaLink Re: Multiple Panel Control on a form aibo 9:12 2 Aug '07   Thanks for addressing the issue.... Did you try to add the smum control in an update panel control. Doing so the title bar gets shrink. And here is request for a feature... I want to validate the input when user click on the OK button and if something goes wrong popup shouldn't disappear. Anyway Idea... tmd Sign In·View Thread·PermaLink Re: Multiple Panel Control on a form Lou Flees 9:23 2 Aug '07   I don't see that problem in my small test app. I like your suggestion. That might be tricky, however, since the modal popup extender is bringing the form down. Sign In·View Thread·PermaLink Re: Multiple Panel Control on a form aibo 12:07 2 Aug '07   I am eagerly waiting for you updated code.... tmd Sign In·View Thread·PermaLink New Version Mander81 5:19 23 Jul '07   I was wondering if you could email me the new version that you have. Thank you for this control. Sign In·View Thread·PermaLink Re: New Version Lou Flees 7:31 23 Jul '07   I've just updated the article in code project to reflect the latest AJAX Control Toolkit. I've updated the demo project and the text of the article. Sign In·View Thread·PermaLink 1.00/5 (1 vote) Microsoft.web.extensions DLL is missing thenucklehead 21:17 5 Apr '07   I cant run the code. it says Microsoft.web.extensions is missing.. what should i do nw.. i checked the references and its not there. Arjun +919841815599 Sign In·View Thread·PermaLink Re: Microsoft.web.extensions DLL is missing Lou Flees 12:56 6 Apr '07   I need to update the control to be compatible with the most recent version of ASP.NET AJAX. I'll get to this next week. Sign In·View Thread·PermaLink 2.00/5 (3 votes) Re: Microsoft.web.extensions DLL is missing cmbeginner 22:55 1 Jun '07   please tell me where Microsoft.web.extensions.dll. I couldn't find it. Thanks. minhldc@gmail.com. If you have please send me by email. Thanks. Sign In·View Thread·PermaLink Re: Microsoft.web.extensions DLL is missing rama charan 4:13 21 Jul '07   please update the article soon... waiting for it.. thanks in advance Rama Charan Prasad "Be happy and Keep smiling.Thats what u want be always.." Sign In·View Thread·PermaLink article out of date softer 5:16 5 Apr '07   This article is outdated!!! It doesn't work with AJAX RTM Sign In·View Thread·PermaLink 5.00/5 (2 votes)

Last Visit: 12:43 6 Jul '09     Last Update: 12:43 6 Jul '09 12 Next »