Ajax Controls Toolkit: ModalPopup extender with UpdatePanel

Scenario: show popup (preferably modal) with editable fields in a Master-Detail mode and provide ability to accept or reject update.

Straightforward combination of ModalPopup extender with UpdatedPanel, containing data-bound controls will work pretty much out of the box with few caveats to consider, mainly with OK/Cancel buttons:

1. Place both OK and Cancel buttons outside the Update panel, otherwise when leaving the page you may get a JScript error "Microsoft JScript runtime error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.".
When client-side objects of the Update Panel are being disposed, the cleanup script tries to remove all registered handlers. If buttons are inside of the UpdatePanel, their handlers are still registered as for all child controls by default, but weren’t re-attached during the callback. Obviously, you can spend time and do it properly, but simply re-placing the buttons will do the job while keeping layout appearance unaltered.

2. Now our buttons are outside of the UpdatePanel and we need to make it aware of relevant Click events. So we will have to add trigger to serve the OK operation:

<asp:AsyncPostBackTrigger ControlID="btnOK" />

Same will do for a Cancel operation but it will work just fine (and with less code) by setting ModalPopup.CancelControlID property.

3. In the case of the Cancel button a ModalPopup “window” will be closed automatically but if you want it to be closed after the OK click, you should do it manually by calling the mpMyPopup.Hide() method.

4. If databound controls were changed on a callback then don't forget to call the UpdatePanel.Update() method to refresh the data.

The resulting code is not the most efficient AJAX solution but it provides quite sophisticated business functionality at a reasonable price. Less additional code means less development time and less QA efforts as, if applied right, standard AJAX libraries are pretty robust.