ASP.NET AJAX: Client-side event viewer

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.