AJAX Client Side Page Execution Life Cycle in Asp.Net
In my previous article, we discuss about AJAX server side page execution life cycle. Here we discuss about AJAX Client side page execution life cycle.
If any asp.net page contains a ScriptManager control it will have both server-side page execution life cycle and also client-side page execution lifecycle.
The following events executed on the client-side.
Application.init—Raised when a page is first requested. This event is not raised during an asynchronous post back.
PageRequestManager.initializeRequest - raised before an asynchronous request to the server starts.
PageRequestManager.beginRequest - raised before an asynchronous request to the server starts.
PageRequestManager.pageLoading - raised after an asynchronous response is received from the server but before UpdatePanel content is updated.
PageRequestManager.pageLoaded - raised after an asynchronous response is received from the server and after UpdatePanel content is updated. Also raised during the initial page request.
Application.load - raised during both normal and asynchronous postbacks.
PageRequestManager.endRequest - raised after an asynchronous response bothwhen there is and when there isn’t an error.
Application.unload - raised before the user leaves or reloads the page.
There are two objects executed on client side in client lifecycle events. Those are the Sys.Application object and the Sys.WebForms.PageRequestManager object. The Sys.Application events happen in a page whether it has UpdatePanel control or not. The Sys.WebForms PageRequestManager events are tied to UpdatePanel control.
Here we discuss AJAX Client side life cycle with simple example.
Create ASP.Net web application and add below code in .aspx page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="btnAsync" Text="Async Postback" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" Text="Normal Postback" runat="server" />
<br /><br />
<textarea id="TraceConsole" cols="60" rows="10"></textarea>
</div>
</form>
</body>
<script type="text/javascript">
Sys.Application.add_init(application_init);
function application_init()
{
Sys.Debug.trace("Application.Init");
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest( prm_initializeRequest );
prm.add_beginRequest( prm_beginRequest );
prm.add_pageLoading( prm_pageLoading );
prm.add_pageLoaded( prm_pageLoaded );
prm.add_endRequest( prm_endRequest );
}
function pageLoad()
{
Sys.Debug.trace("Application.Load");
}
function prm_initializeRequest()
{
Sys.Debug.trace("PageRequestManager.initializeRequest event raised");
}
function prm_beginRequest()
{
Sys.Debug.trace("PageRequestManager.beginRequest event raised");
}
function prm_pageLoading()
{
Sys.Debug.trace("PageRequestManager.pageLoading event raised");
}
function prm_pageLoaded()
{
Sys.Debug.trace("PageRequestManager.pageLoaded event raised");
}
function prm_endRequest()
{
Sys.Debug.trace("PageRequestManager.endRequest event raised");
}
function pageUnload()
{
alert("Application.Unload event raised");
}
</script>
</html>
As we are discussing AJAX Client side life cycle, so we have all events in java script. For normal post back the output display as shown below.
For asynchronous post back, the output display as shown below.
For reference I used the ASP.NET 3.5 UNLEASED by Stephen Walther.
