Dr. Dobb's | Drilling Down Flicker-free Page Updates

Drilling Down Flicker-free Page Updates

Dino explains how to set up partial page rendering in ASP.NET AJAX (Part 2 of 2).

July 16, 2007
URL:http://www.drdobbs.com/windows/drilling-down-flicker-free-page-updates/201001635

The simplest way to extend an existing application with ASP.NET AJAX Extensions is copying all files to a freshly created new application project with a properly updated web.config file. The ASP.NET AJAX assembly—a file named system.web.extensions.dll—can either be manually copied to the Bin folder or referenced through the web.config from the GAC of the server machine. In many hosting scenarios, though, you are invited to bring in all that you need by yourself without relying on what's installed in the server's GAC. Let's take advantage of the side-by-side capabilities of ASP.NET and put the assembly in the Bin folder. Note also that with the release of ASP.NET 3.5 later this fall, the AJAX assembly will be incorporated in the ASP.NET server platform with no need for you to bring it in as part of your code.

Partial rendering is one of the programming models available with ASP.NET AJAX 1.0. It allows you to maintain the same set of pages of an existing application or add new pages written according to the same rules and patterns. No new skills are required except those necessary to manage a couple of new server controls—ScriptManager and UpdatePanel.

Each ASP.NET AJAX page needs just one instance of the script manager control to assess the script code to download for the page. AJAX applications inherently require a lot of script code, but the script manager shields developers from knowing about it and downloads and caches to the client just the right files and in a compressed manner. Here's the markup code you need to have in each ASP.NET AJAX page.


<asp:ScriptManager runat="server" ID="ScriptManager1" />

The second step entails that you identify the regions in the page that need be updated when the user posts back. You wrap each of these regions in a new instance of the UpdatePanel control, as below:


<asp:UpdatePanel runat="server" ID="UpdatePanel1">
   <ContentTemplate>
      <!-- markup -->
   </ContentTemplate>
</asp:UpdatePanel>

Needless to say, each ASP.NET AJAX page can have as many updatable regions as you wish. Moreover, it is recommended that you use multiple regions to minimize the size of each region being updated. Ideally, you first come up with a list of the postback events that a page can fire. Next, you define regions of markup that each event is going to update. Finally, you prepare a map of region/event bindings. To express these bindings, you need to learn a bit more about the programming interface of the UpdatePanel control. An updatable panel is refreshed when any of its child controls posts back or when an explicitly bound server event occurs. You define explicit event bindings through the Triggers collection, as below:


<asp:UpdatePanel runat="server" ID="UpdatePanel1">
   <ContentTemplate>
      <!-- markup -->
   </ContentTemplate>
   <Triggers>
      <asp:AsyncPostBackTrigger ControlName="Button1" 
                                EventName="Click" />
      :
   </Triggers>
</asp:UpdatePanel>

According to the preceding markup, the region is refreshed when either a child control posts back or when Button1 is clicked. Clearly, Button1 is expected to be a control placed outside the markup wrapped in the content template.

The UpdatePanel control takes advantage of the script code inserted by the script manager. This script code hooks up the form's submission event and replaces the traditional browser-led request with an asynchronous script-led request that goes through XMLHttpRequest. On the way back, when the markup hits the client, another piece of script takes care of replacing the root of the region with the new markup. Everything else remains intact and no flickering occurs.

There are two big advantages with this approach. The user's experience is greatly improved because the user experiences a continuous feel with the page. In addition, the amount of data that travels over the wire may be significantly smaller than in classic ASP.NET. How much smaller, though, depends on the region/event bindings you set. Even more importantly, you don't have to learn a new architectural model for your Web applications.

For more information on the technical details of the UpdatePanel control as well as its drawbacks, take a look at my book, Introducing Microsoft ASP.NET AJAX, Dino Esposito, Microsoft Press, 2007.