Over the past few months we've been exploring various ways to integrate BlueDragon/CFML with Microsoft's ASP.NET AJAX framework. One of the most interesting things we've come up with is the CFUPDATEPANEL tag to support partial page rendering. The idea is that any time you have a page that's updated based on an HTML form submission, instead of re-rendering the entire page simply wrap the portion of the page that's to be updated within a CFUPDATEPANEL tag. The body of the CFUPDATEPANEL tag--which can contain *any* server-side CFML code--is the only portion of the page that's re-rendered when the form is submitted.

Here's a trivial example that demonstrates CFUPDATEPANEL; the following page displays the current time and then updates it whenever the "update time" button is clicked:

<h3>Start Time: <cfoutput>#timeformat(now(),"long")#</cfoutput></h3>
<cfform>
    <cfupdatepanel>
        <p><cfoutput>#timeformat(now(),"long")#</cfoutput><br>
        <input type="submit" value="update time">
    </cfupdatepanel>
</cfform>

As you run the live demo, notice that every time you click the "update time" button, the time displayed within the form is updated, but the "Start Time" displayed in the page header is not, indicating that only part of the page was updated. Note also that--as is typical with AJAX applications--there's no "page flicker" as the time is updated.

The CFUPDATEPANEL tag also supports a REFRESH attribute to allow the partial page content to be updated automatically, without requiring a form submission. Again, here's a trivial example that demonstrates this feature; the following page has the contents of the CFUPDATEPANEL updated every 1000 milliseconds (1 second):

<h3>Start Time: <cfoutput>#timeformat(now(),"long")#</cfoutput></h3>
<cfform>
    <cfupdatepanel refresh="1000">
        <p><cfoutput>#timeformat(now(),"long")#</cfoutput><br>
    </cfupdatepanel>
</cfform>

Again, as you run the live demo, notice how smoothly the time is updated, without any corresponding page flicker.

Now let's take a look at a more complicated example to really demonstrate the power of CFUPDATEPANEL (and also introduce the associated CFUPDATEPROGRESS tag). First, consider this example taken from Chapter 24 of the ColdFusion Web Application Construction Kit. As you run the live demo, note the behavior that's typical of non-AJAX pages: there's a noticeable flicker as the entire page is refreshed every time you click a "Next" or "Back" link, and the URL in the browser's address bar is updated with the new query parameters being used to control which records get displayed. Notice also that the timestamp at the bottom of the page is updated each time, indicating that the entire page was updated. Here's the source code for this page (we'll use this to compare to the CFUPDATEPANEL-based version):

• NextN2.cfm
• NextNIncludeBackNext.cfm

Here's the same example modified to do partial page rendering using the CFUPDATEPANEL tag. As you run the live demo, note the differences with the original: there's no flicker as the page contents are smoothly updated, the URL address bar in the browser doesn't change, and the timestamp at the bottom of the page doesn't change (showing that this was indeed only a partial page update). Here's the source code for the CFUPDATEPANEL version:

• NextN2.cfm
• NextNIncludeBackNext.cfm

The changes required to modify the original example to create the AJAX-based version were:

1. Modified NextN2.cfm to add the CFFORM and CFUPDATEPANEL tags; and,

2. Modified NextNIncludeBackNext.cfm to invoke the __doPostBack() JavaScript function when the "Next" or "Back" link is clicked.

That's it! That's how easy it can be to use the CFUPDATEPANEL tag to turn existing pages into AJAX-enabled pages that do partial page rendering. There are more complicated scenarios we're working on, and also a way to hide the __doPostBack() JavaScript call, but the idea is that it should be this easy to add AJAX capabilities to existing pages, just by adding new server-side CFML tags, and without worrying about writing any client-side JavaScript code.

There's one more example to look at. We've also implemented a CFUPDATEPROGRESS tag that works in conjunction with CFUPDATEPANEL to automatically display progress indicators when the page is being updated. Again, run the live demo to see this in action. Here's how the CFUPDATEPROGRESS tag is used:

<cfupdatepanel name="NextN2">
    .
    .
    .
    <cfupdateprogress for="NextN2" delay="0">
        <table cellspacing=0 cellpadding=2><tr><td bgcolor="red">
        <font size="-1" color="white">
         Loading new records... 
        </font></td></tr></table>
    </cfupdateprogress>
</cfupatepanel>

Notice that the FOR attribute associates the CFUPDATEPROGRESS tag with a CFUPDATEPANEL tag (there can be multiple CFUPDATEPANEL tags on a page). Also note the DELAY attribute; the body of the CFUPDATEPROGRESS tag is only displayed if it takes longer than this amount of time (in milliseconds) for the associated CFUPDATEPANEL tag to update the page. The default value for the DELAY attribute is 500 milliseconds (I set it to 0 for this example so it would be more obvious).

Finally, it's worth mentioning that the Microsoft ASP.NET AJAX client libraries on which CFUPDATEPANEL and CFUPDATEPROGRESS are based are free, open source, cross-browser and cross-platform. I've tested these examples on IE and Firefox on Windows, and on Firefox on Linux. I'd be interested to know what other browsers and operating systems people use to run these examples (add a quick comment, if you don't mind), and if you see any problems with your preferred browser or operating system.

Also, these examples are being served by BlueDragon.NET, but we're planning to get CFUPDATEPANEL and CFUPDATEPROGRESS working on the Java/J2EE editions of BlueDragon as well.

This is exciting stuff, and is only the beginning of some pretty cool things we're going to be able to accomplish by building on some of the great technology Microsoft is creating. Come to my keynote at CFUNITED-07 if you'd like to hear more, or stop by to talk to me at our booth (the best time to catch me will be Thursday afternoon after the keynote).