ASP.NET AJAX客户端编程之旅（六）——来做一个自己的客户端控件

ASP.NET AJAX客户端编程之旅（六）——来做一个自己的客户端控件2010-02-11 博客园 T2噬菌体通过前面的文章，我们了解了ASP.NET AJAX框架的很多知识。在这一篇文章中，我们来做一个自己的ASP.NET AJAX客户端控件：PasswordValidator。这个控件关联到的DOM元素是一个span或div，并且关联到一个password类型的input标签，当用户在input中输完密码并且这个input失去焦点时，检测用户输入的密码是否合理，如果合理，则给出这个密码的安全程度。

从这一篇开始，将使用VS2008作为IDE，请朋友们注意。

建立AJAX客户端控件控件的骨架

在以前的VS2005中，建立AJAX客户端控件需要新建一个js文件，然后手工写入全部代码。而在VS2008中，内置了对AJAX客户端组件的支持，可以直接建立AJAX客户端组件文件，IDE会为其自动生成程序骨架。建立方法如下：

首先新建一个工程。在VS2008中，直接建立一个ASP.NET Web site就可以，其中已经内置了对ASP.NET AJAX的支持。我的工程名字叫MyAjaxClientControl

然后我们在Solution Explorer的网站工程右键单击，选择“Add”->“New Item”，在“Web”选项下有一个“AJAX Client Control”，新建一个这种文件就可以了。我的文件名叫PasswordValidator.js。新建好后，文件初始内容如下。

PasswordValidator.js:

1/// <reference name="MicrosoftAjax.js"/>
2
3Type.registerNamespace（"MyAjaxClientControl"）;
4
5MyAjaxClientControl.PasswordValidator = function（element） {
6  MyAjaxClientControl.PasswordValidator.initializeBase（this, [element]）;
7}
8
9MyAjaxClientControl.PasswordValidator.prototype = {
10  initialize: function（） {
11    MyAjaxClientControl.PasswordValidator.callBaseMethod（this, "initialize"）;
12    
13    // Add custom initialization here
14  },
15  dispose: function（） {
16    //Add custom dispose actions here
17    MyAjaxClientControl.PasswordValidator.callBaseMethod（this, "dispose"）;
18  }
19}
20MyAjaxClientControl.PasswordValidator.registerClass（"MyAjaxClientControl.PasswordValidator", Sys.UI.Control）;
21
22if （typeof（Sys） ！== "undefined"） Sys.Application.notifyScriptLoaded（）;

我们简单分析一下这段代码，通过它了解一下ASP.NET AJAX客户端组件的大体样子。

首先我们要在头脑中有一个意识，ASP.NET AJAX扩展了JavaScript，使其具有了面向对象特性，所以，一个ASP.NET AJAX客户端组件可以看成是一个类，既然是一个类，当然就有我们熟悉的东西，如命名空间、成员变量、方法、构造函数、析构函数什么的，当然类还可以继承。有了这么一种意识，理解这段代码就简单多了，当然经过扩展的JavaScript写出的类在语法结构上与传统的C#、Java等类的样子很有差别，但是我们一定要将它看成一个类。

在C#中，写一个类首先要指定命名空间，这里也不例外。Type.registerNamespace（"MyAjaxClientControl"）;就是指定这个类属于MyAjaxClientControl这个命名空间，在这里Type.registerNamespace是固定用法，记住就行了。

接下来要声明一个类，js中声明类可没有class这个关键词，而是使用function，没错，一个类就是一个function，你觉得难以理解也要理解，在这里就是这样的。

   MyAjaxClientControl.PasswordValidator = function（element） {
      MyAjaxClientControl.PasswordValidator.initializeBase（this, [element]）;
   }

关于这行代码，是类的声明，同时也是构造函数。从这里看出，一般一个控件的构造函数需要一个参数element，其实这就是需要关联到的DOM。因为ASP.NET AJAX控件本身是虚的，只有和具体的DOM关联后才能发挥作用。而构造函数里还调用了父类的初始化函数，这里不必细究。

再往下就是有个prototype，这里才是最重要的。这个类的一切成员变量和方法都写在里面，等会这里也是我们主要写代码的部分。关于prototype我不多说，想了解的朋友可以去找JavaScript的书看看，不想了解的只要知道这里放类的成员和方法就够了。可以看到，这里已经自动生成了两个方法，一个是初始化，一个是析构函数。一般这两个函数我们原封不动放在那就可以了。

再往下看，看到MyAjaxClientControl.PasswordValidator.registerClass（"MyAjaxClientControl.PasswordValidator", Sys.UI.Control）;这一行代码。这段代码的作用是，告诉系统PasswordValidator这个函数要声明成一个类，并且要继承自Sys.UI.Control，一般我们自己写的可视控件都要继承自Sys.UI.Control。要记住NamespaceName.FunctionName.registerClass是把某个function编程类的方法，其中registerClass需要两个基本参数，第一个是这个类的名字，第二个是要继承的父类。其实后面还可以有参数，表明这个类要实现的接口。

最后一样不用管它，那是框架需要的一行代码。