Dr. Dobb's | Flicker-Free Web Page Updates

Flicker-Free Web Page Updates

Dino Esposito looks at the two programming models available in ASP.NET AJAX: pure AJAX remote procedure calls and partial rendering. (Part 1 of 2)

July 02, 2007
URL:http://www.drdobbs.com/windows/flicker-free-web-page-updates/200800007

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.