Build your first ASP.NET AJAX web page

Posted on March 4, 2008 20:25 by mcollins

(I reposted this because it accidentally got deleted.)

Building a web application is not so much different than writing a normal desktop application when you consider it from the perspective of the server side. The main difference is that your web application can be accessed by many users concurrently, while your desktop application is only accessed by a single user. But in both cases, the applications start up, initialize themselves, and then wait and respond to user inputs to perform business logic.

When considering the client side of things in a web application, it becomes a little different. A typical web application is made up of many web pages that are served to the user. The user will typically navigate between the web pages by clicking hyperlinks or by pressing buttons that cause the server to redirect them to a different web page. However, from the browser's perspective, each web page is a new application. As such, a web page must also go through the initialization and wait for stimulus process that a typical application will go through.

The ASP.NET AJAX framework has support for building web pages and alerting them when they need to initialize. The ASP.NET AJAX framework implements a global page manager object named Sys.Application that is created when the page is being loaded and manages alerting the page's JavaScript code when the page should be initialized, when the page has been loaded and should start running its business logic, and when the page is being unloaded and should clean up after itself. The first event, initializing the page, is handled by the Sys.Application object calling an event handler for the init event. The second event, telling the page to start running, is implemented by the Sys.Application object calling a special page-scoped function named pageLoad. And the third event, telling the page to clean up and unload itself, is implemented by the Sys.Application object calling another special page-scoped function named pageUnload. Your typical ASP.NET AJAX page template would look like this:

   1: <%@ Page Language="C#" AutoEventWireup="true" ... %>

2:

   3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   4:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   5: <html xmlns="http://www.w3.org/1999/xhtml">

   6: <head runat="server">

   7:     <title>Untitled Page</title>

   8: </head>

   9: <body>

  10:     <form id="form1" runat="server">

  11:     <asp:ScriptManager ID="ScriptManager1" runat="server">

  12:     </asp:ScriptManager>

  13:     <div>

  14:     </div>

  15:     </form>

16:

  17:     <script type="text/javascript">   1:  
   2:     <!--
   3:         Sys.Application.add_init(function() {
   4:             // Create client components. Initialize the page.
   5:         });
   6:         
   7:         function pageLoad() {
   8:             // Begin executing the business logic for the page. Attach
   9:             // event handlers to elements, etc.
  10:         }
  11:         
  12:         function pageUnload() {
  13:             // The page is being unloaded. If you attached event
  14:             // handlers in pageLoad, detach them here to prevent
  15:             // memory leaks.
  16:         }
  17:     //-->
  18:     
</script>

18:

  19: </body>

  20: </html>

The difference to remember between the init event handler and the pageLoad function is that the init event is raised while the page is loading, but before the page is ready. When the init event is raised, the page has been loaded and the initial DOM tree is accessible, but some things such as images, applets, and other embedded objects most likely haven't been loaded and are not accessible. You can use the init event to inject elements into the DOM tree or create other client components, but you shouldn't start executing your page's business logic during this event. When the pageLoad function is called, the page and all of its media elements have been loaded and are rendered, so it's safe to do things such as activate controls, set timers, or begin animations.