2.5. The Client-Side Page Request Lifecycle
ASP.NET developers have been working with the ASP.NET page lifecycle since the first days of ASP.NET 1.0. An ASP.NET developer knows that they are able to interact with the page and its rendering at one of many specific moments in the page request or response lifecycles. For instance, working with page as it is being loaded is as simple as using the Page_Load() event within your page's code-behind.
protected void Page_Load(object sender, EventArgs e)
{
// Perform desired actions here
}As with the series of server-side interactions with the page lifecycle, you are also able to interact with the page lifecycle on the client side through a series of page lifecycle events. This is an important feature, and even using DOM today within the browser, you are able to currently work with the page's invocation of the window.onload() and window.onunload() events using JavaScript. However, you are able to work with these two events only when the ASP.NET page does a complete and full page postback. This means that the asynchronous postbacks, or partial-page postbacks, that ASP.NET AJAX performs would be unable to work with such events.
Interacting with the client-side page events is a matter of using the PageRequestManager class provided with ASP.NET AJAX. The PageRequestManager class is the glue between the ScriptManager control on the page and the control that needs to make use of the partial-page updating. The lifecycle provided by the PageRequestManager object for asynchronous page requests includes five events detailed here:
initializeRequest()
beginRequest()
pageLoading()
pageLoaded()
endRequest()
To get at an instance of the PageRequestManager, you are going to have to call the getInstance() method on the client through JavaScript. An example of this in action is presented here in Listing 2-24.
Example 2-24. Using PageRequestManager
<%@ Page Language="C#" %>
<script runat="server">
protected override void OnLoad(EventArgs e)
{
if (Session["count"] == null){
Session["count"] = 1;
}
else
{
Session["count"] = ((int)Session["count"]) + 1;
}
System.Threading.Thread.Sleep(1000);
theCount.Text = "count = " + Session["count"];
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Using PageRequestManager</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
var initializeCount = 0;
var beginCount = 0;
var loadingCount = 0;
var loadedCount = 0;
var endCount = 0;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initializeRequest);
prm.add_beginRequest(beginRequest);
prm.add_pageLoading(pageLoading);
prm.add_pageLoaded(pageLoaded);
prm.add_endRequest(endRequest);
function initializeRequest(sender, initializeRequestEventArgs) {
initializeCount = initializeCount + 1;
}
function beginRequest(sender, beginRequestEventArgs) {
beginCount = beginCount + 1;
}
function pageLoading(sender, pageLoadingEventArgs) {
loadingCount = loadingCount + 1;
}
function pageLoaded(sender, pageLoadedEventArgs) {
loadedCount = loadedCount + 1;
}function endRequest(sender, endRequestEventArgs) {
endCount = endCount + 1;
}
function showCounts() {
var message = "initialized = " + initializeCount +
"
begin = " + beginCount +
"
loading = " + loadingCount +
"
loaded = " + loadedCount +
"
end = " + endCount;
alert(message);
}
</script>
<div style="border-style: solid">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<br />
<asp:Label runat="server" ID="theCount"></asp:Label>
<br />
<asp:Button runat="server" Text="Refresh" ID="RefreshButton" />
<br /><br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<br />
<input type="button" onclick="showCounts()" value="Show Counts" />
</div>
</form>
</body>
</html> |
When the page is first retrieved, the pageLoaded() event is fired. As the message in Figure 2-17 shows, the pageLoaded() event occurs for all requests, synchronous and asynchronous. When the request for the partial page request initiates by clicking the button in the UpdatePanel, the initializeRequest alert will be shown. This event does not occur for the full postback triggered by the button outside the UpdatePanel. It is part of the asynchronous lifecycle implemented by the PageRequestManager.
After the page is first run, it shows one page execution and one pageLoaded. As shown in Figure 2-17, the other counts are zero. If you click the Refresh button and wait, all of the counts are incremented by one. However, if you click the button several times quickly, the counts begin to change out of synch with each other. You will notice that the page execution count you get corresponds to the count of the pageLoaded counter. This count is one ahead of the beginRequest, loadingPage, and endRequest counters. However, the initializedRequest counter is now much higher. As I clicked the button faster than the request could be initiated, the previous start would be canceled in favor of the newer request. At that point, the multiple starts are essentially seen as simultaneous, and only one is advanced to the beginRequest event.
Figure 2-17. Figure 2-17
The potentially confusing thing about the series of events is that they do not fire all of the time. Requests can be canceled or preempted by another request. The page from Listing 2-24 sets up counters that are incremented for each time the event handlers are invoked. It also increments a counter on the server for every time the page executes. The count is then displayed inside an UpdatePanel control. The page sleeps briefly so that a request can be initiated while another is pending. There is also a button for displaying the current counter values.