As with the Server-Side ASP.NET Life Cycle, the Client-Side also raises events on PostBack. In this example, we will be looking at the events raised on the Client-Side, and will also output the trace messages to a text box.

Because we will be working with the Client-Side, we have to use JavaScript as the code will be run in the browser, as opposed to on the server. To start, we will create our ASPX page. Go ahead and add two buttons and also a HTML TextArea:

If using Microsoft Internet Explorer, we are required to add the TextArea and give it an ID of TraceConsole in order to view the trace messages. In FireFox however, we can use the console within the FireBug plugin.
We will be using two buttons – one inside the UpdatePanel, and one out – so that we can call both an Asynchronous PostBack and a Normal PostBack. This way we can compare the differences between the trace messages.
Let’s go ahead and add the ScriptManager and UpdatePanel. In Visual Studio.NET 2008, this is simply a matter of adding the tags:

Once again, because we’re working with the Client Side, we will not be adding code-behind logic. Instead, we use JavaScript to run in the browser on the client side.
The events that we’ll be using that happen on the client-side are as follows:
Application.init – occurs when a page is first requested from the server;
PageRequestManager.initializeRequest – occurs before an Asynchronous request initiates;
PageRequestManager.beginRequest – occurs before an Asynchronous request initiates;
PageRequestManager.pageLoading – occurs before an UpdatePanel is updated, but after an Asynchronous response from the server is received;
PageRequestManager.pageLoaded – occurs after an UpdatePanel is updated, and after an Asynchronous response from the server is received;
Application.load – occurs during PostBacks;
PageRequestManager.endRequest – occurs after an Asyncronous response;
Application.unload – occurs before the application unloads (user leaves or refreshes), as indicated by the JavaScript alert we used in the code below.

Now when we run our Web Application, you will notice that the Async button will set all the values to True except PreInit. This is because the IsAsyncPostBack Property gets updated after this event is called.

Download Source Files