Creating a Client Component Class Using the Prototype Model

This topic shows you how to create an AJAX client component class in ASP.NET. An AJAX client class, which includes base components, behaviors, and control classes, is defined in ECMAScript (JavaScript) using the prototype model and JSON notation. In JSON notation, all prototype members are separated with commas. There is no comma after the last member in the prototype.

The following example defines a simple client component class that has no practical functionality. It demonstrates how to define a class derived from the Component base class by using the prototype model.

// Declare a namespace.
Type.registerNamespace("Samples");

// Define a simplified component.
Samples.SimpleComponent = function()
{
    Samples.SimpleComponent.initializeBase(this);

    // Initialize arrays and objects in the constructor
    // so they are unique to each instance.
    // As a general guideline, define all fields here. 
    this._arrayField = [];
    this._objectField = {};
    this._aProp = 0;
}
// Create protytype.
Samples.SimpleComponent.prototype = 
{
    // Define set and get accessors for a property.
    Set_Aprop: function(aNumber)
    {
        this._aProp = aNumber;
    },

    Get_Aprop: function()
    {
        return this._aProp;
    },

    // Define a method.
    DoSomething: function()
    { 
       alert('A component method was called.');
    }
} // End of prototype definition.


// Register the class as derived from Sys.Component.
Samples.SimpleComponent.registerClass('Samples.SimpleComponent', Sys.Component);

The following steps describe how to define an ASP.NET AJAX client class, including control classes:

1. If the class is part of a namespace, register the namespace by calling the Type.registerNamespace method.

2. Define the class constructor function and its namespace in the constructor function name. In the constructor, declare all private fields. It is recommended that private variables in the constructor be declared as instance fields by using the this pointer. By convention, private fields are named with an underscore prefix.

   Samples.SimpleComponent = function()
   {
       Samples.SimpleComponent.initializeBase(this);
   
       this._arrayField = [];
       this._objectField = {};
       this._aProp = 0;
   }
   

3. Define the class prototype. In the prototype, define all public and private methods. This includes property accessor methods and events.

   It is recommended that you define all fields in the constructor. There is a very small performance gain for defining fields in the prototype instead of in the constructor function. However, not all field types can be declared in the prototype. For example, Array and Object field types must be declared in the constructor so that they are unique to each instance, instead of being referenced in the prototype from all instances. This avoids the unintended result of updating a component property for what you expect to be one instance, but instead updating the value for all instances.

   Note

   Always reference members in the prototype through the this pointer. The this pointer has a performance benefit because the working set uses less memory.

4. Register the class by calling the Type.registerClass method. For more information about how to use the Type.registerClass method to register a class and to declare its interfaces and base class, see Type.registerClass Method.

See Also

Tasks

Creating Custom Non-Visual Client Components