Using UpdatePanels with ModalPopups

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.

ModalPopupUpdatePanel.zip

Comments

• Anonymous
  January 01, 2003
  ZOMG!  Thank you so much.  Moving the OK and Cancel buttons outside of my inner update panel worked as well. Within a larger update panel I am now able to create a modal popup with search functionality inside an inner update panel, which even binds to a datagrid for the search results. This sure beats calling modalPopUp.Show() every time in the server-side code maintain the popup window.  Thanks!

• Anonymous
  January 01, 2003
  Glad to hear it worked for you! Just for your information, I no longer blog on technet. My new blog is located at http://blogs.msdn.com/kirti/ I look forward to seeing you there. Kirti

• Anonymous
  January 01, 2003
  Hello Kirti, could you please provide with an example of how the following scenario could be implemented: I have an update panel that is refreshing about 10 sec. During this time I'd like to display a progress panel in a form of ModalPopup: ModalPopup has an animated gif, no buttons, it shows up on top of everything else, the background is grayed and all the controls on the page are disabled. When the refreshing is done, ModalPopup disappears and page displays the refreshed update panel content. Can it be done using the Toolkit's controls or requires custom development? The similar scenario works on forums.asp.net whenever you post a comment. Thanks in advance, Alexander

• Anonymous
  January 01, 2003
  Hi, what if there are no UpdatePanels? I have a problem in my code with this, and it seems that nobody has it. I have some radio buttons (<input type="radio" id="orto" value="ORTO" name="TipoDescarga" onclick="settings.SetTypeRadioChecked(this, 'pnlCartografia');"/>ORTO) inside the modalpopup. The problem is that radio buttons don't keep selected. Why not? I think It's a simple scenario. Please, I need help. Sorry, I speak English very bad. Esther

• Anonymous
  January 01, 2003
  Hi Alexander, You can always show and hide the modalpopup in the PageRequestManager's beginRequest and endRequest event handlers. Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(showModalPopup);        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(hideModalPopup); In this case, you can use the ModalPopup Sample website demo page to hook up showing and hiding the modalPopup in code. In the handlers you can also determine if the control that caused the trigger and or the the actual update panel that is being refreshed to make more decisions. Check out the asp.net pagerequestmanager for more information: http://ajax.asp.net/docs/tutorials/UpdatePanelClientScripting.aspx

• Anonymous
  January 01, 2003
  Thanks.. moving the Ok and Cancel button outside the updatepanel solved my problem.

• Anonymous
  January 01, 2003
  Nice Article Thanks

• Anonymous
  August 07, 2011
  Hi kirti, I am facing really weird issue. I have a code in which i toggle a div.This toggle function works under modal Popup and Update Panel Separately.but it doesnt work under the combination of these.i have a modalpopup inside update panel and that toggle inside modal popup.Can u help me in this. Thanks in advance.

• Anonymous
  February 14, 2012
  great example and solved my problem.. thanks 2 thumbs up for the solution

• Anonymous
  November 15, 2012
  Hi kirtid, In my page, i had modal popup extender with flickering on postback. Now that issue was fixed because of your example. Thanks for your article. Ramakrishnan t

• Anonymous
  January 15, 2014
  Hi kirti nice article,I have one query i have "usercontrol imagebutton" in my modal popup control when this button is get clicked the popup is get disappeared please help methnks in advance.

• Anonymous
  January 15, 2014
  Hi kirti nice article,I have one query i have "usercontrol imagebutton" in my modal popup control when this button is get clicked the popup is get disappeared please help methnks in advance.