When you are using the ASP.Net Ajax Extension and add a ScriptManger to your page, you can easy use the ASP.NET Ajax Library to make it easier to handle client-side script (Java-script), you can easy with the AJAX Library create namespace and “classes” (types), use Object-oriented programming) OOP. As you may know java-script doesn’t have build-in support for most OOP concepts.  Microsoft has tried to reflect the client-side java-script in a similar way of creating classes etc as in C#. This will help developers to have a similar way of writing client-side script as they write server-side code (minimize the differences). This post will take a look at how you can create a namespace to categorize classes and also how to create a class with the AJAX Library with client-side script. I will later in other posts go more into how you can sort of do inheritance and use interfaces etc, things that don’t exists in client-side script, but what the ASP.Net Ajax library make possible.

Here is an example of a Customer class on the client.side:

Type.registerNamespace(’Nsquared2.ASPAJAX.Samples.Customer’);

Nsquared2.ASPAJAX.Samples.Customer = function(firstName, lastName, address)
{
   this._firstName = firstName;
   this._lastName = lastName;
   this._address = address;
}

Nsquared2.ASPAJAX.Samples.Customer.prototype =
{
   get_firstName: function()
   {
       return this._firstName;
   },
   get_lastName : function()
   {
       return this._lastName;
   }
}

Nsquared2.ASPAJAX.Samples.Customer.registerClass(’ Nsquared2.ASPAJAX.Samples.Customer’);

var myCustomer = new Nsquared2.ASPAJAX.Samples.Customer(’Fredrik’, ’Normén’,’My address’);
alert(myCustomer.get_firstName());

By using the registerNamespace method of the Type class, you can create namespace and register the use of it. The registerNamespace method will create four objects, Nsquared2, ASPAJAX, Samples and Customer. You can by using the Nsqaured2 object get access to the ASPAJAX object etc. The objects can have some metadata, which for example can be used to identify them as namespaces. It can also use them to hold other objects that are added to the namespace.

To define a class we simply assign a method:

Nsquared2.ASPAJAX.Samples.Customer = function(firstName, lastName, address)  { }

The Nsquared2.ASPAJAX.Samples.Customer will now work as a “class” (even if classes don’t exist in java-script, ASP.Net Ajax Library will provide us a way of creating a “class”).  As you may know all arguments in java-script is kind of optional, so you don’t need to use all arguments when you instantiate the Customer class.  The assigned function will be used as the constructor for the class, and in the example it takes three arguments that will assigns them to local variable by using “this”. The “this” keyword will make sure the variables, _firstName, _lastName and _address will be in a local scope mode and find in a local scope and not in global scope.

Nsquared2.ASPAJAX.Samples.Customer = function(firstName, lastName, address)
{
   this._firstName = firstName;
   this._lastName = lastName;
   this._address = address;
}

To add properties and methods to the Customer “class”, we can use the prototype. The prototype of the base type in Java-script has been modified to add type-system support. The following code will add two get method to the Customer’s prototype that will work as properties:

Nsquared2.ASPAJAX.Samples.Customer.prototype =
{
 get_firstName: function()
 {
    return this._firstName;
 },
 get_lastName : function()
 {
    return this._lastName;
 }
}

To make sure we can make a call to the get_firstName and get_lastname functions, we need to register the class. This is done by calling the registerClass method:

Nsquared2.ASPAJAX.Samples.Customer.registerClass(’ Nsquared2.ASPAJAX.Samples.Customer’);

The registerClass method takes three arguments, name of the type, base type to extend and the interface a “class” implements. I will write more about the two last arguments in a later post.

When this is done, we can now create an instance of our “class” and use it:

var myCustomer = new Nsquared2.ASPAJAX.Samples.Customer(’John’, ’Doe’,’My address’);
alert(myCustomer.get_firstName());

The code above will create an instance of the Customer ”class” and fill the local variables _firstName, _lastName and address with a value passed as arguments, and an alert will be used to display the value of the firstName property.