[ASP.NET AJAX Client Component] Controls

Controls are classes that are inherited from the “Sys.UI.Control” class and used to represent or wrap DOM elements. Controls are visual components because they are associated with DOM elements.   

1. Sys.UI.Control

The “Sys.UI.Control” is a base class for all AJAX control. It inherits all members from the “Sys.Component” class and provides a couple of special properties and methods.

– Properties –

  • element: gets the current DOM element (readonly)
  • parent: the parent control
  • visible: the visibility of the current object; true/false
  • visibilityMode: describes the layout of a DOM element when the element’s visible property is set to false; “hide” (it occupies space) or “collapse” (the space it occupies is collapsed); the default is “hide

– Methods –

  • addCssClass(className): adds a CSS class to the DOM element
  • removeCssClass(className): removes a CSS class to the DOM element
  • toggleCssClass(className): toggles(adds if exists or removes if not) a CSS class to the DOM element

2. Creating a Control

You can create a control just as you creat a component.

  • Register a namespace if necessary
  • Define the constructor function and intialize the base class
  • Override the “initialize()” and “dispose()” method defined in the base class
  • Add custom methods and properties
  • Register a clss with a base class “Sys.UI.Control
  • Create a behavior using the “$create()” method; you need to provide an element that is associated with this behavior as a last parameter

3. Declaring a Constructor

As an example, let’s create a NoSpaceTextBox control, which does not allow spaces as an input.

When you define a constructor, you need to pass an “element” paramter to the base class just as you do to create a behavior.

Type.registerNamespace('MyAjax');
MyAjax.NoSpaceTextBox = function (element) {
  MyAjax.NoSpaceTextBox.initializeBase(this, [element]);
}

4. Providing Custom Methods

The “onKeyPress” method will handle the “keypress” event of the text box and if the space key is pressed, it will be ignored.

MyAjax.NoSpaceTextBox.prototype = {
  onKeyPress: function (evt) {
    if (evt.charCode == 32) {
      evt.preventDefault();
    }
  }
}

5. Overriding Base Methods

The “initialize()” and “deploy()” methods should be overriden.

MyAjax.NoSpaceTextBox.prototype = {
  onKeyPress: function (evt) { ... },
  initialize: function () {
    MyAjax.NoSpaceTextBox.callBaseMethod(this, 'initialize');
    $addHandler(this.get_element(), 'keypress', this.onKeyPress, true);
  },
  dispose: function () {
    MyAjax.NoSpaceTextBox.callBaseMethod(this, 'dispose');
  }
}

6. Preparing Test Page

Let’s add some text boxes for testing.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
User Name: <input type="text" id="userNameTxt" /><br /><br />
Password: <input type="password" id="pwTxt" />

The user name and password should not have spaces, therefore our new control is a good wrapper of the plain text box.

7. Creating a Control

You can create a class and a control when the page is loaded.

function pageLoad() {
  MyAjax.NoSpaceTextBox.registerClass('MyAjax.NoSpaceTextBox', Sys.UI.Control);
  $create(MyAjax.NoSpaceTextBox, {}, {}, {}, $get('userNameTxt'));
  $create(MyAjax.NoSpaceTextBox, null, null, null, $get('pwTxt'));
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s