ASP.NET AJAX and the AJAX Control Toolkit make use of
client-side code to improve the quality of ASP.NET controls. With ASP.NET
AJAX, the developer can create a piece of code that classes, etc. that extend
the application's client-side library and add additional functionality and
promote reuse. In the case of control extenders, this piece of code sits
between the extender DOM element and the server-side extender class. I'll talk
more about this at the end of the section.
The ASP.NET AJAX framework doesn't add any new syntaxes or
flavors to the JavaScript language, but uses the existing notations in
JavaScript and extends upon them. Some of the benefits they've added are
client-side type checking, class, interface, and enumeration declarations,
inheritance, and many other features. As in the .NET Framework, ASP.NET AJAX
client components use namespaces as well. To create a namespace, use the
following designation:
Listing 11
Type.registerNamespace("Nucleo");
This registers a namespace, which allows a creation of a
fully-qualified name, shown in the next example. One of the other major
mechanisms is the creation and registration of a class, which has a specific
layout. Below is an example:
Listing 12
Nucleo.MyClass = function()
{
this._text = null;
}
So far, the above example defines the constructor. The
constructor takes a reference to the underlying DOM element that the class
represents (such as in developing a custom control extender, which is a separate
topic). However, the constructor can have whatever parameters it wants. Note
that it's recommended to place any private variables in the constructor, and
not in the prototype, for a performance gain. In addition, any delegates
require the use of a private variable, described later.
Listing 13
Nucleo.MyClass.prototype =
{
get_Text : function()
{
return this._text;
},
set_Text : function(value)
{
this._text = value;
},
clearText : function()
{
this._text = null;
}
}
Nucleo.MyClass.registerClass("Nucleo.MyClass", null, Nucleo.MyInterface);
Note that properties, methods, and constructors use
functions, which is a mechanism defined already by the JavaScript framework;
the ASP.NET AJAX Client Library doesn't change the syntax of JavaScript, but
adds objects you can use to increase what you can do with your client
components.
Note the registerClass statement; the second parameter
defines the base class to inherit from (null in this case means there isn't any
base class). Some of the options are: Sys.UI.Component, Sys.UI.Control,
Sys.UI.Behavior, and AjaxControlToolkit.BehaviorBase. This list isn't
complete, and it's possible to inherit from your own custom classes as well.
ASP.NET AJAX also makes use of enumerations, which are very
helpful in defining a finite set of values. Check out the following example:
Listing 14
Type.registerNamespace("Nucleo");
//Empty constructor; not needed
Nucleo.MyEnumeration = function() { }
Nucleo.MyEnumeration.prototype =
{
Yes : 1,
No : 2,
MaybeSo : 4
}
Nucleo.MyEnumeration.registerEnum("Nucleo.MyEnumeration", false);
Note the true value for the second parameter of
registerEnum; this specifies whether the enumeration defines the flags
attribute, meaning that it can use a bitwise operator to reference multiple
enumerations for the same variable, similar to what you can do in .NET.
So what is the purpose of all of this? Well, in the case of
control extenders and AJAX controls, the JavaScript creates a class that sits
on top of the underlying DOM element. A text box client control is extended
through a behavior that attaches to the DOM element and its events, but exposes
its own properties and methods to perform any necessary actions it needs to.
In addition, the server-side piece of the control or extender uses this JavaScript
class to interact with it initially.
In the case of control extenders, it works well because the
server-side piece uses base classes that output the core assignments of
properties and auto-generates other useful code that the application needs. The
base class hides some of the details so you don't have to worry about it, while
you can define some of the functionality in the server-side. I'll be writing
articles on server-side extenders later.