Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

.NET

Drilling Down Flicker-free Page Updates


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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.