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

Flicker-Free Web Page Updates


When web pages were nothing more than a relatively short collection of hyperlinks and headings glued together by a few paragraphs, the pages were light to download over a network connection. And initially just being able to access a remote document from our own desk was rewarding enough to justify any network latency and delay. But the success of the web changed users' perceptions. Today, users expect a web page to be rich and sophisticated, with complex layouts, nice-looking effects such as gradients and composite backgrounds. As a result, downloading and uploading a web page takes more and more time even on faster connections and hardware than only a few years ago.

Asynchronous JavaScript and XML (AJAX) propounds a radical shift of paradigm bringing in a finer level of granularity as far as the amount of data to transfer with each request is concerned.

The AJAX paradigm, though, entails a number of architectural changes, because it usually moves most of the usual action and interaction to the client. Commanding a remote operation and subsequently refreshing the user interface are often actions entirely governed from the client through the JavaScript language. While terribly effective, this approach requires a new application architecture and a new set of tools to assist developers.

ASP.NET evolved from classic ASP essentially adding a new framework and a new and particularly rich set of tools to author web pages. ASP.NET AJAX is simply an extension to ASP.NET that adds asynchronous capabilities to pages. ASP.NET AJAX extensions offers two programming models—pure AJAX remote procedure call and partial rendering.

The former model assumes that your application employs a pure AJAX architectural model where most of the action takes place, or is controlled, on the client and requires new skills to developers such as deep knowledge of things like JavaScript, CSS, the Document Object Model (DOM), and JavaScript Object Notation (JSON). The model of the pages has to be reworked and new patterns and practices to be learned and digested. Powerful, but not cheap; so enter ASP.NET AJAX partial rendering.

The classic ASP.NET programming model is fully server-side and relies upon unique features like postback and viewstate to work. When users trigger a page refresh, the contents of the unique form the page is made of is uploaded to the same URL of the current page. The ASP.NET runtime processes the request and generates a new chunk of HTML for the browser to display. The viewstate preserves the last good state of the page elements; the postback mechanism gives developers a natural way of implementing a familiar eventing model, where the user clicks on the client and some action triggers on the server. As a result, updated markup is sent to the browser.

This model has a big drawback: the whole content of the page is downloaded over and over again, including layout information, static text and graphics and all those parts of the page unaffected by the latest action.

With partial rendering, you maintain the same application model of classic ASP.NET and let the ASP.NET extensions to take care of all programming details. Put another way, partial rendering allows you to associate portions of the page with events. When an event occurs, the specified portion of the page is refreshed asynchronously while everything else remains intact. All that you do is enable the model, define regions to be updated independently, and specify which actions refresh which region. You do this through a bunch of new server controls—ScriptManager, UpdatePanel, and UpdateProgress.

I'll go into more detail in my next article.


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.