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’.
Related posts:
- Cookie-less Session Variables in JavaScript Cookies may be delicious, but they can be clumsy if...
- Server-side JavaScript Will Be as Common as PHP Despite the fact that JavaScript has been typecast as the...
- Will Server-Side JavaScript ever catch on? Server-side JavaScript appears to be a logical choice for web...
- Google Releases its JavaScript Closure Tools Do we need more JavaScript libraries and tools? Perhaps not,...
- 10 Things to Check Before Using a CAPTCHA Hacking attempts and spam bots are your problem - not...
Great, It doesn’t even have the tab problem.
October 12th, 2006 at 9:37 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 :)
October 12th, 2006 at 10:47 pm
Can I do same using PHP ?
Thanks.
November 30th, 2006 at 3:01 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
January 10th, 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:
<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>
January 10th, 2007 at 5:30 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.
January 27th, 2007 at 4:13 am
Dean, How do you declare modulPopupExteder1 on the server?
Thanx
March 9th, 2007 at 2:08 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.
March 30th, 2007 at 5:45 am
Dean your solution worked with me perfectly, thanks.
September 8th, 2007 at 1:01 am
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??
February 26th, 2008 at 4:23 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.
August 3rd, 2008 at 2:50 pm
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).
April 14th, 2009 at 4:28 am