Using UpdatePanels with ModalPopups

kirtid — Fri, 04 May 2007 02:13:00 GMT

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.

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

Silverlight at the end of the tunnel

kirtid — Fri, 04 May 2007 00:22:00 GMT

I was in Las Vegas this week attending the MIX' 07 conference along with the rest of the Toolkit team. My team mates, David Anson and Ted Glaza worked on the keynote demo that Scott Guthrie presented. The demo was written in managed code using the alpha version of the Silverlight platform that Microsoft showcased at MIX. It is a cool airline application composed of three core controls, Calendar, FlightPicker and Map. The source code is available for download from David's blog.

Silverlight will be a big leap in terms of the way we perceive the web. Essentially, with the managed code support, one no longer needs to be a web developer to write rich and interactive web applications. There is no need to worry about javascript, understand browser differences or css incompatibilities. It is all abstracted away from the developer who can focus on the end scenario without being distracted by these issues. All there is to see is XAML, XAML and more XAML and of course CSharp. I am up for that any day if I can get away from javascript. Why? Static language, with rich compiler support, intellisense, debugging support and a wide array of .NET apis to build on top of - need I say more? Our next project may have a lot more to do with Silverlight. Will it be a Silverlight Control Toolkit? May be. If you have ideas or suggestions around it do send me an email or leave a comment.

Hello Kirti : MIX

Using UpdatePanels with ModalPopups

Silverlight at the end of the tunnel