Using UpdatePanels with ModalPopups

Moving an old post over from my old Technet blog to this MSDN blog.

One of the most frequently asked questions on the Toolkit forums and at MIX after Shawn's demo was how to get UpdatePanels to work right with ModalPopups. The trick is to understand that the ModalPopup extender attaches itself to more than just the TargetControl and PopupControl. If you include the OK and Cancel buttons inside the ModalPopup Panel in an UpdatePanel, make sure you include the extender declaration in it as well. If you do not, once a postback occurs the extender will not reinitialize the handlers and you will get null references. Also, if buttons inside the ModalPopup Panel are set to be OK and Cancel buttons on the ModalPopup Extender, then their sole purpose is to close the Popup Panel and run their respective scripts if any have been set. They will not perform postbacks or execute any other client side handlers since the ModalPopup prevents the event from propagating up.

I have attached a sample page that demonstrates three simple scenarios with ModalPopups and UpdatePanels.

1. ModalPopup with an UpdatePanel inside its Popup Panel: Make sure that the OK and Cancel buttons are not inside the UpdatePanel otherwise the handlers will be rendered useless on postback.
2. UpdatePanel that contains a ModalPopup Extender and its Popup Panel: Clicking OK or Cancel still does not cause the postback since those buttons are tied to client side handlers. Clicking on any other control will cause the server side handlers to kick in. Since the extender declaration is inside the UpdatePanel, the asynchronous postback causes the ModalPopupBehavior to be reinitialized correctly and any client side handlers are setup again when the request is completed. So if you would like to postback every time the user clicks OK or Cancel, just don't set those properties on the extender. The Modal Popup Panel closes on postback as desired since the entire popup is inside an UpdatePanel.
3. What if that Popup Panel in # (2) contains an UpdatePanel : Specify the triggers that will cause the outer panel to update and allow the UpdatePanel inside the ModalPopup to operate on its own terms. This time the ModalPopup Panel does not close on postback triggered from within it because the trigger for the outer panel is specifically set to be a separate button.

It is a good idea to design the page without UpdatePanels in mind. When writing the page place UpdatePanels when the rest is done. Once you have the page setup, determine locations in your page that need to be asynchronously updated and the controls that should act as triggers to perform that operation and then appropriately place UpdatePanels with the correct triggers and UpdateMode property set. With extenders it is important that you take into consideration not just the controls targetted by the extender but any others which it hooks into to provide additional functionality.

This post should evolve as I get more feedback and I will update the sample accordingly as well. I hope this helps.

Comments

• Anonymous
  August 27, 2008
  Hi, I tried so many times for your advice:What if that Popup Panel in # (2) contains an UpdatePanel. But i still got the modalpopup to clear when the control inside modalpopup is postback. Where is the examples? Hope to hear from your help.

• Anonymous
  November 04, 2008
  I have a Modal Popup inside a Update Panel. And have two sets of such panel and Update Panel. In Each of Modal Popup I have a Radio Button list. Modal Popup Panel is getting populated on server side. Now when Ok button is clicked it is generating a postback. When Any one of the two Panels is clicked it works fine. But when second panel is clicked then its getting postback but Radiobutton property is lost. Both Radiobutton in the List are unchecked eventhough One is checked. Please help ....

• Anonymous
  January 04, 2009
  place a updatePanel inside the Panel of the control that is for "pop-up".  the outer update panel handles the modalpopup, but the inner updatePanel inside the modal panel will resolve your autopostback forms.

• Anonymous
  February 11, 2009
  Ok long story short.  I have a modalpopup within an updatepanel.  The timer was auto canceling my modal when it was open. I've tried:

1. having a hidden button attached to the modalpopup targetcontrolid.  I then made the button that used to be on the targetcontrolid run serverside code.  It A. Turned off the timer and B. call javascript method "FireModal()".  Although I got a handle in JS on the hidden button the .click would not work.
2. I then thought in "FireModal()" I can just get a handle on my modalpopup and call .show() within my JS method.  For some reason I cannot, using getElementByID, get a handle on my modal popup.  It is always null. Do you have any ideas why?  I've been on this for quite some time and I think I'm going insane. Any help would be greatly appreciated. Thanks in advance, Todd

• Anonymous
  February 14, 2009
  I have a "Forgot Passord" link that pops up the modalpopup.  I want to validate the username and then display the success (password sent) or the failure message (account does not exist).  I want to do this all while in the modalpopup.  My click codebehind works but before it gets fired the modalpopup dissappears.  Any clues? [code] <asp:UpdatePanel ID="updtpnlForgotPassword" runat="server" UpdateMode="Conditional">    <ContentTemplate>        <asp:Panel ID="pnlForgotPassword" runat="server" CssClass="modalPopup" Style="display: none" Width="290px" Height="150px">            <span class="modalFormTitle">Password Recovery</span>            <p align="center">Enter your email and click send.</p>            <asp:Label ID="ForgotPasswordResult" runat="server" CssClass="successText" />           <label class="modalFormLabel">Email</label>            <asp:TextBox ID="ForgotPasswordEmail" runat="server" class="modalTxtInput"></asp:TextBox>           <br />            <div align="center" class="modalButtonDiv">              <asp:Button ID="OkButton" runat="server" Text="Send" class="modalButton" />&nbsp;&nbsp;              <asp:Button ID="CancelButton" runat="server" Text="Cancel" class="modalButton" />           </div>        </asp:Panel>    </ContentTemplate>      <Triggers>                                          <asp:AsyncPostBackTrigger ControlID="OkButton" EventName="Click" />         </Triggers>   </asp:UpdatePanel> [/code]

• Anonymous
  February 16, 2009
  Hi Craig - have you tried moving the UpdatePanel into the Modal popup? That way it will not disappear. Todd - If the hidden button and the Modal popup markup are both inside the UpdatePanel then it should probably do the trick.

• Anonymous
  March 05, 2009
  Hi, I have problem with the modalpopupextender control.. i m using it in the nested user controls. But when it pops up it is been displayed in the child user control and not on the top of page. What i will need to do , to display it on the top

• Anonymous
  April 09, 2009
  Kirti, I have code where I have usercontrol inside a panel. Modal Pop Extender hides and shows the panel hence the user control. However, I want to reload the user control whenever pop up is lauched . So I ended up doing something like this. But it doesnt work. Any clue <ajax:ModalPopupExtender ID="popup" PopupControlID="pnl" DynamicServiceMethod="GetContent" DynamicControlID="hdnContext" DynamicContextKey="<%# Evale(ID) %>"                            TargetControlID="btnEdit" runat="server" BackgroundCssClass="modalBackground"                            DropShadow="false"> //  <asp:Panel ID="pnl" runat="server" Style="display: none">            <asp:HiddenField ID="hdnEditValue" runat="server" />             <asp:Label ID="hdnContext" runat="server" />            <asp:UpdatePanel ID="test" runat=server UpdateMode= "Conditional" >                     <ContentTemplate>                  <uc1:Edit ID="ucEdit" runat="server" />            </ContentTemplate>            <Triggers>                <asp:AsyncPostBackTrigger ControlID="hdnEditValue" />            </Triggers>            </asp:UpdatePanel>        </asp:Panel>

• Anonymous
  April 20, 2009
  hallo i have a problem my modalpopup works well without a updatepanel but whenever a put the panels and publish it to my webhosting it gives me an javascript code error. Could you explain why this is happening? and what can i do?