The Server/Client Balance of Power Continues – Part 2

In my last post we talked the limitations of AJAX and especially the UpdatePanel as you get into more complicated situations. In this post I am going to explore one of the ways that you can avoid an overly complicated Control tree on the server and simply the HTML DOM on the browser side. This approach involves combining UpdatePanel with IFrames.

This is my current favorite approach to AJAX web application architecture, since it doesn’t add a lot of complication to the solution, and an intermediate level developer can easily grasp the way the different layers communicate back and forth.

Think about the situation where you have a Grid and you want to have a dialog popup with the details for the selected row. The Grid part is simple: just add a DataSource and your favorite Grid control inside an UpdatePanel. Some grid controls have AJAX callbacks built-in, so you don’t even need the UpdatePanel. Now you need to add the dialog popup. One way to do this is to put a UserControl on the page that has the editing functionality. If that control has a TabContainer and maybe another couple of UpdatePanels to handle some embedded grids on there, then you can see how the page is started to rather crowded. I will stop this path of thinking right now and show explain my solution:

Use an IFrame for the contents of the dialog

• Get a handle on the dialog extender using $find()
• Put the HTML that describes the IFrame inside a ModalPopupExtender’s DynamicContextKey using Javascript via _dynamicContextKey.
• Show the dialog using the extender’s show() method.
• Hide the dialog by invoking the hide() method of the extender from the iframe via a javascript function described on the main page.

To get our popup dialog, we can add a ModalPopupExtender to the page, and set its popup control to be a Panel that has the details UserControl in it. Normally a ModalPopupExtender needs to have a Button for its TargetControlID, which you are obliged to add to the page, but you can simply hide this using a css style of display:none, since it won’t help you much if you want to run some other code.

Next, put another Panel inside the main dialog Panel. This is where the dynamic content for the dialog will go. The complete declaration should look something like this:

Notice how the “Dynamic” properties have all been set to a web service path, a service method and a fixed string respectively. Note that you need to set a default DynamicContextKey or the page will not load at all.

Now, to show the dialog, you will call a javascript function, something like this:

When the function “showIFrameDialog” is invoked, you can pass it a variable that will be in turn used in the QueryString of the IFrame’s page. This way you can pass data to the new page that is loaded for the details panel.

When you are finished with the dialog, you will need to call a function for OK or Cancel – one that refreshes the Grid, and one that simply closes the page. To do this you can use code similar to the following:

I won’t too much further into detail about the rest of the nuts and bolts (like any code you might run on the server side, I think you get the picture for how a pretty elegant application structure can be laid out with some fairly simple techniques, combining the ever-maligned IFrame with the UpdatePanel for some great results.