Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.








Skip Navigation Links.
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

Creating a Client Component Class Using the Prototype Model


This topic shows you how to create a Microsoft ASP.NET AJAX client component class. An ASP.NET 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.

// Define a simplified component.
Samples.SimpleComponent = function()

    // 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.

// Declare the base this class inherits from.

// 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()
        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.


    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 registerClass Method.