Total votes: 2
Print: Print Article
Please login to rate or to leave a comment.
Published: 18 Aug 2008
Download Sample Code
Let’s take a look at some of the very basics of ASP.NET AJAX and how to develop client components with the ASP.NET AJAX library
Now let us look at some of very basics about ASP.NET AJAX for a little warming up.
Rather than an inseparable mass of content, format and controls, modern web pages are structured in a hierarchy of HTML elements called
DOM (Document Object Model), such as
button, etc. The DOM provides a base on which we can access elements’ attributes and modify properties and update content dynamically.
Almost all browsers employs
DOM, however all browsers do it with their own quirks, so compatibility issues are among the loudest cries. For this reason and for others (for example, aiding the communication between server and client using
HttmXmlRequest, emulating the server side object-oriented programming model such as C#, VB .NET), the Microsoft AJAX library was born. It provides a set of new methods for accessing
DOM elements and perform event handling.
Accessing DOM elements and performing event handling
Traditionally, supposing that we have an input button control
DOM element as follows:
Now, with ASP.NET AJAX, we do this instead (using the shortcut
$get to reference a
With AJAX, this is a little different. It takes three steps:
- Attach an event handler to a control using
$addHandler’s signature is:
$addHandler(Element, eventName, eventHandler), with
Element being a
DOM element, referenced by
EventName is the name of the event to be handled. For example,
mouseout. Normally the
on prefix is omitted from the
$addHandler method call;
eventHandler is the function name for actual event processing. Generally we attach an event handler using the
$addhandler() method in the
$addHandler method. It takes only one parameter, the
- Detach the event handler from its control in the
page_unload event, using
$removeHandler() has the same signature as
Example: using $addHandler to prevent a right click action
Sometimes you may want to prevent user right clicking an image from downloading it. The following example illustrates how we attach / detach an
onContextMenu event handler to an image in order to accomplish this.
Listing 1: $addHandler to prevent right click
Figure 1: $addHandler example screenshot
A classic function:
A function assigned to a variable:
Function as an object
function is the keyword for an object creation.
The following defines an empty object
Using the function in conjunction with the keyword
new, we can create an instance of
We can fill a class with fields and methods. Normally, we use the
this keyword to denote private properties of a class.
Underscore in ASP.NET AJAX is a naming convention to denote private properties of an object.
We normally define methods for getting and setting property values, and we normally do so in the
prototype function of an object.
prototype sets the blueprint (properties and methods) shared by an object and all of its descendants and instances. For example, we define the property getters and setters in the person’s
We can also add any number of behaviors, methods in the prototype object:
Class in Microsoft Ajax Library
registerClass() method to register the object into a class.
registerClass() has a signature like this:
name: The name of the class
base type: The base type of the class, so that we can inherit the members and methods of the base class.
interface type: The interface type of the class, if any, as a reference to the type
The second and third arguments are optional. For example, the
person class does not have a base type and does not implement an interface type, so we may omit the second and third arguments.
Type.registerNameSpace() to register a namespace with the AJAX library, then register the class to the namespace.
Once we have defined a class and registered it with the Microsoft AJAX library, we can easily create a child class inheriting the parent’s public and protected members. The following
Child class inherits a
person class but with its own
play() methods defined.
Listing 2: A derived class child that inherits a base class person
AJAX Client Components
So far we have rambled through some of the fundamentals in the Microsoft AJAX libraries. Now we can apply the basics to create client -side components, derived classes of the
Component is an all-encompassing term. In ASP .NET AJAX, a component can be visual, associated with a DOM element, exhibiting predefined behaviors; or non-visual, which has no UI representation and no DOM association. Visual behaviors / controls and non-visual components are designed for reuse across applications.
Creating a component always takes the following four steps:
- Register namespace by using
- Define the component's constructor, private fields and their initial values
- Define the component's getting and setting methods for property value retrieval or manipulation, event handling methods and logic in the prototype.
- Register the component function as a class derived from Component.
We can easily modify the above created
person class into a non-visual components by having it inherit from
How do we create an instance of the person component and call its methods? We need to use the
$create method, which takes five arguments, as in:
So we can create a person component and invoke the methods as the following:
Listing 3: Creating a person and child component and invoke the methods
Please note that you can register scripts that are required for a client control on the page with a ScriptManager control, either declaratively or programmatically as in the following example.
Please also note that we use $find, an alias for the
Sys.Application.findComponent method to access a component.
The two types of visual components, behavior and controls, though having different bases classes, do not bear a great deal of differences in creation and usage. By definition, “Element behaviors are encapsulated components” attached to a DOM element for extended functionality and visual effect. Client control, on the other hand, works as a DOM element wrapper. A client control itself is a DOM element and can change the original behavior of the control it wrapped. A control can also wrap multiple controls to make into a new control. A client control class must be derived from the control class, while behavior the Sys.UI.Behavior class.
Creating client behaviors and client controls share the common steps:
- Define the constructor, initialize the base class and declare private properties.
- In the control/behavior prototype function, define Properties and raising Property-changed notification, define member methods and event handlers.
- Releasing Resources. Release resources by overriding the
The following example demonstrates the process of creating a client behavior, in which a list of links are tied with a
showMugShotBehavior, so whenever the event of mousing over a link, such as Bill Gates, Michael Jackson, will trigger the link to display an infamous mug shot of this person.
Listing 4: A client behavior example
We create a client behavior the same way as we do with non-visual components, by calling the
$create method and specifying the
DOM element with which the behavior associated with. A behavior can be associated with unlimited number of elements of different types, as both buttons and images can display the same behaviors. Take the above example: We attach the
showMugShotBehavior to a hyperlink called
Figure 2: ShowMugShot Behavior Screenshot
Client controls are created much like client behaviors. The following is an example that demonstrates the process. It wraps up an input text control which accepts numbers only and automatically changes the inputted number into the format: #, ###, ##.
Listing 5: Code for the Test.AddCommaText control
As you can see from the above example, we use the overridden methods
initialize to attach handlers for the
keyup events of the textbox element, then we call the overridden
dispose method to detach the handlers and release resources. The
_onKeypress function detects and rejects any non-numeric characters except the backspace character; the
_onKeyup handler formats the textbox input by adding comma between every three numbers upon user releasing a key.
Listing 6: Testing the addCommaText control
Figure 3: AddComma Text box screenshot
So far we have run through some of the very basics about event handling and class creation with ASP .NET AJAX, together with the basic steps for client component development. I hope you are not overwhelmed by the set of new methods, keywords and concepts. Although the Microsoft AJAX library is still very much a work in progress, it has become a powerful tool for developers to create AJAX driven rich websites. And client components are surely an indispensable part of the Microsoft AJAX library, for that it affords us to wrap up nitty- gritty programming details into one black box and reuse it in other applications.
Web developer, Data Analyst, GIS Programmer
This author has published 12 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.