I [heart] the ModalPopup

By | October 12, 2006 | .NET

12
  • Print
  • Print

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’.

Written By:

Wyatt Barnett

Wyatt leads the in-house development team for a major industry trade association. When not slinging obscene amounts of C# and SQL at a few exceedingly large monitors, he is most often spotted staring at HDTV and other forms of entertainment in local watering holes.

 

{ 12 comments }

dotnettex April 14, 2009 at 4:28 am

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

CmShafi August 3, 2008 at 2:50 pm

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.

Ritesh February 26, 2008 at 4:23 pm

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

M. Credli September 8, 2007 at 1:01 am

Dean your solution worked with me perfectly, thanks.

Dean March 30, 2007 at 5:45 am

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.

PK March 9, 2007 at 2:08 am

Dean, How do you declare modulPopupExteder1 on the server?

Thanx

Dean January 27, 2007 at 4:13 am

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.

Jake January 10, 2007 at 5:30 am

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>

Jake January 10, 2007 at 5:29 am

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

thafath November 30, 2006 at 3:01 am

Can I do same using PHP ?

Thanks.

dhtmlgod October 12, 2006 at 10:47 pm

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

bungle October 12, 2006 at 9:37 pm

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

Comments on this entry are closed.