Using ASP.NET AJAX

[dhilipkumar]

          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 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) {}

Using ASP.NET AJAX - DOM Element Methods

For DOM elements, ASP.NET AJAX provides special methods for common scenarios like applying CSS classes. These methods are defined in theSys.UI.DomElementclass. For common features like setting CSS classes or removing them, CSS class methods take some keyboarding weight off developers' shoulders.

Code Select Expand

Sys.UI.DomElement.addCssClass(element, className)

Adds a CSS class (className) to an HTMLelement.

Sys.UI.DomElement.containsCssClass(element, className)

Checks whether the CSS class definition of anelementcontains a certain CSS class.

Sys.UI.DomElement.removeCssClass

Removes a CSS class (className) from an HTMLelement.

Sys.UI.DomElement.toggleCssClass(element, className)

Checks whether the CSS class definition of anelement contains a certain CSS class (className). If it does, it removes this CSS class, otherwise it appends the CSS class. Apart from CSS classes, ASP.NET AJAX provides helper methods for some of the most often accessed properties of general HTML elements: width, height, and position.

Code Select Expand

Sys.UI.DomElement.getBounds(element)

Returns an object with the propertiesx,y,height,width, containing the x coordinate, y coordinate, height, and width of the given element.

Sys.UI.DomElement.getLocation(element)

Returns an object with the propertiesxandy, containing the x and y coordinates of the given element.

Sys.UI.DomElement.setLocation(element, x, y)

Sets the x and y coordinates of the given element.

Another method defined withinSys.UI.DomElementisgetElementById()—but you already know the shortcut for that,$get().