Programming
Article

I [heart] the ModalPopup

By Wyatt Barnett

In case you missed it, there was a September release of the Atlas Control Toolkit. Now, the big new feature is animation support. Which I must say is cool. But then again, if I wanted animation I would use flash. But there is another control in the toolkit which I have fallen in love with for a number of reasons: the ModalPopup.

Why do I like it so much, you ask? Mainly because it allows a developer to do things like create a complex confirmation dialog. Or make a pop-up add item form without an actual pop-up. All without writing a lick of JavaScript. And I suck at javascript.

There is, however, one big trick to making the ModalPopup post back to the server-side that the published examples do not make clear—how to allow the popup panel to fire a post-back. And, after half a day of struggling, I found the answer was actually disturbingly simple: just make sure any button you wish to post back is not handled by the ModalPopupExtender by simply ignoring the OnOkScript property.

The other issue a developer need be aware of is how validation controls behave when a ModalPopup comes into the picture:

  • If the validator is on the underlying form, the client-side validators are ignored. The Page’s IsValid property is properly set. Which means, you, as the developer, must gracefully handle the potential invalidity of the submission coming out of the ModalPopup. I suspect someone a bit craftier than I with client-side script could find a way to prevent the popup from firing if the form was invalid.
  • If the validators are on the control which is popped up, the client-side validation works nicely. However, CustomValidators without requisite client-side script will allow the form to be posted back, and the ModalPopup is not visible after postback.

Enjoy and keep it poppin’.

  • bungle

    Great, It doesn’t even have the tab problem.

  • http://www.totalpda.co.uk dhtmlgod

    The ModalPopup is fricking lovely! I’ve been slowly introducing it into some apps.

    Some of the animation looks nice, I’m not a huge fan of flash, so I’ld sooner go with Atlas :)

  • thafath

    Can I do same using PHP ?

    Thanks.

  • Jake

    I’m experiencing a different story to the one you outline in your post. I have a required field validator inside the popup panel control with EnableClientScript=”true”. This is used to ensure that a name is typed into a text box. There is also an ‘Ok’ link button inside the pop up panel, which is set up to postback the webform by leaving OnOkScript property unset. When I click Ok the form always posts back even if the text box is empty. However I do briefly see my validation message next to the text box before the modal popup disappears during the postback.

    Any idea why it still posts back?

    This is a simplified version of the code I am using which will demonstrate the problem:

    Ok

  • Jake

    I’m experiencing a different story to the one you outline in your post. I have a required field validator inside the popup panel control with EnableClientScript=”true”. This is used to ensure that a name is typed into a text box. There is also an ‘Ok’ link button inside the pop up panel, which is set up to postback the webform by leaving OnOkScript property unset. When I click Ok the form always posts back even if the text box is empty. However I do briefly see my validation message next to the text box before the modal popup disappears during the postback.

    Any idea why it still posts back?

    This is a simplified version of the code I am using which will demonstrate the problem:

    <form id=”form1″ runat=”server”>

    <atlas:ScriptManager ID=”sm” runat=”server” EnablePartialRendering=”true” />

    <asp:Button ID=”btnNewList” runat=”server” Text=”btnNewList” CausesValidation=”false”></asp:Button>

    <atlasToolkit:ModalPopupExtender ID=”mpe1″ runat=”server”>
    <atlasToolkit:ModalPopupProperties
    TargetControlID=”btnNewList”
    PopupControlID=”pnlNewList”
    DropShadow=”false” />
    </atlasToolkit:ModalPopupExtender>

    <asp:Panel ID=”pnlNewList” runat=”server” style=”display:none; width: 600px;”>
    <asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server” ControlToValidate=”txtListName” EnableClientScript=”true” Text=”List name is missing.”></asp:RequiredFieldValidator>
    <asp:Label ID=”Label3″ runat=”server” AssociatedControlID=”txtListName” Text=”List name”></asp:Label>
    <asp:TextBox ID=”txtListName” runat=”server”></asp:TextBox>
    <asp:LinkButton ID=”btnNewListOk” runat=”server” CausesValidation=”true”>Ok</asp:LinkButton>
    </asp:Panel>

    </form>

  • Dean

    I’ve found that regardless of whether the OnOKScript property is set, if the control causes a postback, the modal will close. My validation workaround has been to programmatically show the modalpopup. Here’s some sample code:

    If page.isValid then
    ‘Do some update script
    Else
    modulPopupExtender1.Show()
    End If

    Hope this helps out.

  • PK

    Dean, How do you declare modulPopupExteder1 on the server?

    Thanx

  • Dean

    I’m just adding the modalPopupExtender1 as a control to the page. Once it has been added, you should have access to it’s properties/methods in the codebehind or inline code blocks.

  • M. Credli

    Dean your solution worked with me perfectly, thanks.

  • Ritesh

    Hi,
    I m using the AJAX ModalPopUp Extender, on ‘Ok’click i want to perform some serach from database then bind the grid view with result. But problem is that on click the ModalPopUp Extender has been closed and in .cs file it will again show by code ‘ModalPopUpExtender1.Show()’.
    Any one can help me to prevent the hide() property on click on ‘Ok’ button in modalpopUp Extender??

  • CmShafi

    ModalPopupExtender works fine but I have a flash animation clip inmy web page, ModalPopupExtender showing behind this flash animation. Is there any solution? thanks in advance.

  • dotnettex

    Has anyone notice a flicker using the ModalPopupExtender when the update panel does a postback?

    I am using it to show two list boxes (both with UP / DOWN buttons). When a user highlights a list item, and clicks either button, the panel will flicker doing a postback to the server (which moves the list item up or down, then updates the list panel). It doesn’t happen locally (do to the speed of the response from my local IIS) but it will flicker with any latency (i.e. when moved to a DEV or STAGE server elsewhere on the network).

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.