ASP.NET AJAX: Client-side event viewer

davidbarkol — Mon, 26 Mar 2007 06:57:00 GMT

Introduction

Often times when an ASP.NET developer is first learning about the page lifecycle, he puts together a simple application that displays the raised events on the page. This widespread technique helps him understand the order in which the events occur, the arguments that are passed along, and ultimately what can and cannot be accomplished during each event.

In ASP.NET AJAX, a page lifecyle, similar to the one that occurs on the server; takes place on the client as well. By leveraging the client-side events raised by the Application class and the PageRequestManager, we can take more control of the application during partial-page updates. The figure below illustrates the events that occur within the browser when a successful partial postback is applied.

Client-Side Event Viewer

To gain a deeper understanding of the client-side event model in ASP.NET AJAX, I've put together an application that exposes the client-side steps that occur during partial postbacks. In addition, the example demonstrates:

Canceling a postback request
Aborting a postback request
Client-side error handling
Visual feedback for long postbacks (similar to the UpdateProgress control)

Here is a snapshot of a portion of the application after a typical postback:

Click here to download the source code and let me know what you think.

ASP.NET AJAX - Ajax Server Extensions sample

davidbarkol — Tue, 23 Jan 2007 22:51:00 GMT

In ASP.NET AJAX, the Ajax Server Extensions consists of a powerful set of server controls that simulate Ajax behavior on the client. In other words, these controls do not perform Ajax in its traditional sense (JavaScript calls to a server and dynamic updates with dhtml) but rather in a different way that gives the same illusion to the end user.

To demonstrate the power of these controls, I've taken an existing ASP.NET application that suffered from normal, pre-ajax symptoms like page refreshes, static content and loss of interactivity and added the controls to make it a more engaging experience. The goals for the task were as follows:

Improve network latency - cut back on the amount of data being passed back and forth between the server and browser
Eliminate unnecessary page refreshes - keep the user connected to the application and the interaction as fluid as possible
Keep UI and application logic on the server - This spares us from exposing ui logic to savvy web users (like yourselves) and also gives us the luxury of supporting the rare cases when a browser has JavaScript disabled
Seamless and transparent integration - Keep intact the existing logic on the server and make integration as unintrusive as possible
Stick to familiar paradigm - leverage the server controls as much as possible to provide the typical ASP.NET developer a familiar paradigm to work with

Along the way I also tried to exercise some common, recommended patterns for ASP.NET AJAX:

Set UpdateMode for UpdatePanels to Conditional
Placed ScriptManager in master page, leveraged ScriptManagerProxy for content pages
Avoided gratuitous animations - kept animations subtle, relevant and simple
Set Timer control interval to a high value - the timer actually runs on the client, we should be mindful of their resources

The application manages to use all of the controls in the AJAX Extensions (not the Futures CTP). For a little extra, it includes the AutoCompleteExtender for the search box. By the way, this control is now in the Ajax Control Toolkit - where it belongs.

The code for the application, written for the 1.0 release; can be downloaded here (requires SQL Express).

Below is a snapshot of the application in action:

David Barkol's blog : Atlas

ASP.NET AJAX: Client-side event viewer

Introduction

Client-Side Event Viewer

ASP.NET AJAX - Ajax Server Extensions sample