4.1. The Browser Page Lifecycle

One of the first things to understand about the ASP.NET AJAX Library is that it establishes a page lifecycle for JavaScript code running in the browser. It is not as complex as the server page lifecycle, but it is central to interacting with some of the more complex features. This lifecycle gives you some easy "hooks" that you need to tap into in order to do the processing you want to do at the right time.

Although the JavaScript event mechanism is simpler than that provided by the .NET Framework, it is sufficient for your needs. Listing 4-1 shows a very basic page built with ASP.NET. This page simply pops up a box with the word Hello, but it shows a basic starting point. To use the Microsoft AJAX Library and initiate the client-side lifecycle in the browser, there is a ScriptManager control on the page. This takes care of rendering the references to the scripts that make up the library, which the browser will have to request when the page loads.

Example 4-1. Working with the pageLoad() and pageUnload() functions
<%@ Page Language="C#" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple Hello</title>

    <script type="text/javascript">
        function pageLoad(sender, args) {
           alert("Hello");
        }

        function pageUnload(sender, args) {
           alert("Goodbye");
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
    </form>
</body>
</html>

The pageLoad() and pageUnload() functions are the primary points where you will interact with the browser page lifecycle. The pageLoad() function is automatically called after the page is initially retrieved from the Web server and some script processing has occurred. In turn, the pageUnload() function is then called whenever a subsequent request is initiated (for postback, partial page rendering, shutting down the browser instance, or even when navigating to a different application).

When the page from Listing 4-1 is run, you will first be presented with the alert dialog box with the text Hello right when the page is first pulled up in the browser. Then if you shut down the browser instance, you will then be presented with the second alert stating Goodbye.

When the page is loaded again, even during partial rendering, the pageLoad() function will again be triggered. Chapter 11 of this book discusses building custom controls and shows additional details of the page lifecycle beyond those presented here.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset