Using ASP.NET AJAX
(Page 1 of 4 )
Combine an easy-to-use framework with higly desirable web functionality and what do you get? The subject of this two-part series, which focuses on ASP.NET AJAX. It is excerpted from chapter four of
Programming ASP.NET AJAX, written by Christian Wenz (O'Reilly, 2007; ISBN: 0596514247). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
In addition to delivering a considerable amount of Ajax functionality in an easy-to-use framework, ASP.NET AJAX provides a number of additions to JavaScript that can make client coding easier. Among these are OOP-style constructs, such as namespaces, inheritance, and interfaces, as well as client-side reimplementations that resemble .NET constructs such asStringBuilder. Also, selected JavaScript objects are enriched with new features.
ASP.NET AJAX Shortcuts and Helper Functions
By including the ASP.NET AJAXScriptManagercontrol into a web page, you automatically get a number of useful helper functions and shortcuts to important JavaScript features. Some of these new functions just save you some typing. Some of them, however, offer a much greater advantage: they are browser-agnostic. For instance, Internet Explorer on one side and all other modern browsers on the other side each provide their unique way to attach event listeners (see Chapter 2). The code in ASP.NET AJAX detects the browser type and automatically uses the appropriate function on every system.
Shortcuts The method most often used by developers to create a modern JavaScript-powered web site is document.getElementById(). Several Ajax toolkits provide a shortcut for this rather lengthy method name called$(). ASP.NET AJAX tries to coexist with other frameworks and therefore is using a new name:$get().
Whereas this saves only a few characters, the new event handling helper functions are of greater value. When programmatically assigning a handler function to an event, you can use the$addHandler()function.
function $addHandler (element, eventName, handler) { }
You need to provide theelementattribute to attach the handler to theeventName(without the “on” prefix!), and the actualhandler(as a function reference or an anonymous function). Below is an example that pops up a warning window when a user clicks on a button:
$addHandler("Button1", "click", function() { alert("Ouch!"); } );
When you want to assign handlers for several events for an element, you can either use several$addHandler()calls, or you use$addHandlers(), providing the element and an array of events and handler functions as arguments.
To remove a specific handler, use the$removeHandler()function demonstrated here:
function $removeHandler(element, eventName, handler) {}
Note that you have to pass the event-handler function again when removing the handler. Therefore, it is more convenient in most cases to call the$clearHandlers()function, which removes all handlers for a given element:
function $clearHandlers(element) {}
Adding Event Handlers, the Alternative Way
Apart from the $addHandler(),$removeHandler()and$clearHandlers()functions, ASP.NET AJAX also supports a special pattern for attaching handlers to element events: theadd_xxx()methods. For instance,Sys.Applicationis the ASP.NET AJAX JavaScript object that represents the current page. In order to execute code after the page has been fully loaded, you can code as shown here:
Sys.Application.add_load(function(){
/* ... */
}).
This is quite useful when using special client classes for DOM elements that are currently part of the ASP.NET AJAX Futures CTP. We will cover this in greater detail in Chapter 15.
The ASP.NET AJAX team tried very hard to recreate to a certain extent the ASP.NET page lifecycle in JavaScript. JavaScript itself only supports aloadevent, which is not enough for some applications. It also has a serious flaw: the event is fired when the HTML markup of the current page has been fully loaded. However, ASP.NET AJAX sites load several external JavaScript libraries. They are usually not available yet when the HTML has been fully rendered by the browser. Therefore, using the JavaScriptloadevent to start any ASP.NET AJAX coding is too early in the client page lifecycle.
Theloadevent defined by ASP.NET AJAX only runs when all external JavaScript files have been fully loaded. In order to execute code after the event has been fired, you have two options. You can either use theSys.Application.add_load()method (as described in the sidebar, “Adding Event Handlers, the Alternative Way”), or you can write a JavaScript function namedpageLoad(). When ASP.NET AJAX determines that all external files have been fully loaded, it executes thepageLoad()function, if it exists on the current page—quite similar to the way ASP.NET executes the server-sidePage_Load()method if it exists. This method provides a safe way to start using ASP.NET AJAX as early as possible.
function pageLoad(){
/* ...*/
}
At the end of a page, when the user closes the browser or navigates to another URL, theunloadevent occurs. You can execute code when this happens by writing a function calledpageUnload().
function pageUnload(){
/* ...*/
}
ASP.NET AJAX automatically executes such a function at the appropriate time, if it has been implemented.
Next: DOM Element Methods >>
More ASP.NET Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Programming ASP.NET AJAX, written by Christian Wenz (O'Reilly, 2007; ISBN: 0596514247). Check it out today at your favorite bookstore. Buy this book now.
|
|
