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:
/// <reference name="MicrosoftAjax.js"/>2
3
Type.registerNamespace("MyAjaxClientControl");4
5
MyAjaxClientControl.PasswordValidator = function(element) 
{6
MyAjaxClientControl.PasswordValidator.initializeBase(this, [element]);7
}8
9
MyAjaxClientControl.PasswordValidator.prototype = {10
initialize: function() {11
MyAjaxClientControl.PasswordValidator.callBaseMethod(this, 'initialize');12
13
// Add custom initialization here14
},15
dispose: function() { 16
//Add custom dispose actions here17
MyAjaxClientControl.PasswordValidator.callBaseMethod(this, 'dispose');18
}19
}20
MyAjaxClientControl.PasswordValidator.registerClass('MyAjaxClientControl.PasswordValidator', Sys.UI.Control);21
22
if (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需要兩個基本參數，第一個是這個類的名字，第二個是要繼承的父類。其實後面還可以有參數，表明這個類要實現的接口。
最後一樣不用管它，那是框架需要的一行代碼。
編寫控件
在正式編寫代碼前，我們先來簡單分析一下。其實所謂編寫，就是給這個類的骨架添加合適的成員變量與方法，因爲我們是要完成一個類嘛。在摘要中我們介紹了， 這個控件是一個密碼強度驗證控件。所以，我們需要一個輸入：用戶輸入的密碼。這個輸入我們可以寫成一個數據成員。我們還需要一個輸出：密碼強度提示信息。 我們這個空間最終要關聯的DOM是一個span或div，所以這個強度信息可以直接顯示在其innerHTML中。另外，我們還需要一個方法：驗證密碼。 這個方法在指定文本框失去焦點時被觸發，它將分析密碼強度，並輸出其強度信息。
分析到這裏，我們基本確定了，我們需要一個成員變量：userPassword，它是需要被驗證的密碼。還需要一個方法：validate，它驗證密碼強 度並輸出信息。下面我們來編碼。這裏注意，爲了使得業務邏輯儘量簡單，我們僅僅通過密碼的長度確定密碼強度，我們的業務邏輯是：3個字符以下視爲不合 法，4-8視爲弱，9-12視爲中，13以上視爲強。在實際應用中，應該還要通過正則表達式，檢查密碼的組合情況，來確定密碼強度。
PasswordValidator.js:
/// <reference name="MicrosoftAjax.js"/>2
3
Type.registerNamespace("MyAjaxClientControl");4
5
MyAjaxClientControl.PasswordValidator = function(element) {6
MyAjaxClientControl.PasswordValidator.initializeBase(this, [element]);7
}8
9
MyAjaxClientControl.PasswordValidator.prototype = {10
11
_userPassword: null,12
13
get_userPassword: function() {14
return this._userPassword;15
},16
17
set_userPassword: function(value) {18
this._userPassword = value;19
},20
21
validate: function() {22
var tip;23
var passwordLength = this.get_userPassword().length;24
25
if(passwordLength <= 3) {26
tip = "<font color=\"#FF0000\">密碼不合法，長度太短</font>";27
}28
else if(4 <= passwordLength && passwordLength <= 8) {29
tip = "<font color=\"#666600\">密碼強度-弱</font>";30
}31
else if(9 <= passwordLength && passwordLength <= 12) {32
tip = "<font color=\"#0000FF\">密碼強度-中</font>";33
}34
else {35
tip = "<font color=\"#00FF00\">密碼強度-強</font>";36
}37
38
this.get_element().innerHTML = tip;39
},40
41
initialize: function() {42
MyAjaxClientControl.PasswordValidator.callBaseMethod(this, 'initialize');43
44
// Add custom initialization here45
},46
dispose: function() { 47
//Add custom dispose actions here48
MyAjaxClientControl.PasswordValidator.callBaseMethod(this, 'dispose');49
}50
}51
MyAjaxClientControl.PasswordValidator.registerClass('MyAjaxClientControl.PasswordValidator', Sys.UI.Control);52
53
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
上面就是編寫好的控件。我們看到，我們和ASP.NET AJAX默認一樣，使用了JOSN的格式，即定義成員變量時是“變量名:初始值”的格式，我們定義了一個_userPassword變量。然後，我們定義 了這個變量的get和set方法，這裏注意，我們一定要遵循ASP.NET AJAX規定的格式，即“get_變量名”和“set_變量名”的格式。最後定義了validator方法。
應用控件
目前，我們只是編寫了控件，但是還沒有將它應用於實際程序裏。我們知道，控件不能獨立存在，只能應用於程序才能看到其效果。
首先，我們在Default.aspx頁面上增加一個密碼類型文本框和一個div，而這個div將顯示密碼強度驗證的結果。其代碼很簡單。如下所示：
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyAjaxClientControl._Default" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml" >6
<head runat="server">7
<title>Untitled Page</title>8
</head>9
<body>10
<form id="form1" runat="server">11
<asp:ScriptManager ID="ScriptManager1" runat="server">12
<Scripts>13
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />14
<asp:ScriptReference Path="~/PasswordValidator.js" />15
<asp:ScriptReference Path="~/ajax.js" />16
</Scripts>17
</asp:ScriptManager>18
<div>19
<input id="pwdUserPassword" name="pwdUserPassword" type="password" />20
<div id="pwdUserPasswordValid"></div>21
</div>22
</form>23
</body>24
</html>
接下來，我們要運用組件編程的思想進行程序設計。新建一個js文件，命名爲ajax.js，這個文件將成爲程序的控制器。下面先貼出代碼再進行分析：
ajax.js:
var txtUserPassword;2
var validUserPassword;3
4
Sys.Application.add_init(onPageInit);5
6
function onPageInit()7
{8
txtUserPassword=new Sys.Preview.UI.TextBox($get("pwdUserPassword"));9
txtUserPassword.initialize();10
validUserPassword=new MyAjaxClientControl.PasswordValidator($get("pwdUserPasswordValid"));11
validUserPassword.initialize();12
13
$addHandler($get("pwdUserPassword"),"blur",txtUserPassword_onBlur);14
}15
16
function txtUserPassword_onBlur()17
{18
validUserPassword.set_userPassword(txtUserPassword.get_text());19
validUserPassword.validate();20
}
看過前幾篇的朋友肯定能很容易理解這短代碼。注意其中的validUserPassword被賦予了一個MyAjaxClientControl.PasswordValidator的 實例，這正是我們剛纔編寫的那個控件。而頁面如何知道這個控件的存在呢，有沒有注意到，在Default.aspx的ScriptManager中，已經 引入了PasswordValidator.js文件，這保證了程序可以識別這個自定義控件。我們知道，這個控件的構造函數有一個參數element，是 需要關聯到的DOM元素，這裏我們關聯到了pwdUserPasswordValid這個div。
還要注意的一點就是$addHandler($get("pwdUserPassword"),"blur",txtUserPassword_onBlur);這 行代碼，由於ASP.NET AJAX的TextBox控件並沒有封裝on_blur（當控件失去焦點時觸發）這個事件，所以我們要在DOM的層面上爲這個事件添加監聽函數。 而$addHandler就是ASP.NET AJAX爲我們提供的一種語法縮寫，它的原型是$addHandler(DOMElement,eventName,listener)，其意思是讓 listener監聽DOMElement的eventName事件，即當DOMElement的eventName被觸發時，執行listener函 數。具體到這裏，就是文本框失去焦點時，執行txtUserPassword_onBlur。
我們再來看看txtUserPassword_onBlur做了什麼：它首先將txtUserPassword的內容賦予 validUserPassword的_userPassword變量，然後執行其validate方法。這樣，validUserPassword就會 對數據進行驗證，並將結果顯示於指定的div裏。
執行效果看下圖：
可以看到，隨着不同的密碼長度，我們自己做的控件給出了相應的密碼強度。每次文本框失去焦點時都會進行驗證。
結束語
這一篇中，我們自己做了一個ASP.NET AJAX控件。當然，限於篇幅，不可能將相關的知識全部呈現出來，但是，希望通過做這個控件，可以讓廣大朋友對ASP.NET AJAX客戶端控件的開發有一個初步的認識，也加深對ASP.NET AJAX客戶端控件原理的理解。相信只要不斷聯繫，假以時日，朋友們一定可以隨心所欲做出自己需要的控件。
本文示例程序可以在這裏下載：MyAjaxClientControl.rar
主要參考文獻
[1] 陳黎夫，ASP.NET AJAX程序設計-第II卷：客戶端，人民郵電出版社，2007年10月
[2] ASP. NET AJAX Roadmap Documentation，http://www.asp.net/ajax/documentation/live
作者：T2噬菌體出處：http://leoo2sk.cnblogs.com
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。