ASP.NET AJAX用戶端編程之旅（六）——來做一個自己的用戶端控制項

通過前面的文章，我們瞭解了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需要兩個基本參數，第一個是這個類的名字，第二個是要繼承的父類。其實後面還可以有參數，表明這個類要實現的介面。

最後一樣不用管它，那是架構需要的一行代碼。