摘要
通過前面的文章，我們了解了ASP.NET AJAX框架的很多知識(shí)。在這一篇文章中，我們來做一個(gè)自己的ASP.NET AJAX客戶端控件：PasswordValidator。這個(gè)控件關(guān)聯(lián)到的DOM元素是一個(gè)span或div，并且關(guān)聯(lián)到一個(gè)password類型的input標(biāo)簽，當(dāng)用戶在input中輸完密碼并且這個(gè)input失去焦點(diǎn)時(shí)，檢測用戶輸入的密碼是否合理，如果合理，則給出這個(gè)密碼的安全程度。
從這一篇開始，將使用VS2008作為IDE，請(qǐng)朋友們注意。
建立AJAX客戶端控件控件的骨架
在以前的VS2005中，建立AJAX客戶端控件需要新建一個(gè)js文件，然后手工寫入全部代碼。而在VS2008中，內(nèi)置了對(duì)AJAX客戶端組件的支持，可以直接建立AJAX客戶端組件文件，IDE會(huì)為其自動(dòng)生成程序骨架。建立方法如下：
首先新建一個(gè)工程。在VS2008中，直接建立一個(gè)ASP.NET Web site就可以，其中已經(jīng)內(nèi)置了對(duì)ASP.NET AJAX的支持。我的工程名字叫MyAjaxClientControl
然后我們?cè)赟olution Explorer的網(wǎng)站工程右鍵單擊，選擇“Add”->“New Item”，在“Web”選項(xiàng)下有一個(gè)“AJAX Client Control”，新建一個(gè)這種文件就可以了。我的文件名叫PasswordValidator.js。新建好后，文件初始內(nèi)容如下。
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客戶端組件的大體樣子。
首先我們要在頭腦中有一個(gè)意識(shí)，ASP.NET AJAX擴(kuò)展了JavaScript，使其具有了面向?qū)ο筇匦?，所以，一個(gè)ASP.NET AJAX客戶端組件可以看成是一個(gè)類，既然是一個(gè)類，當(dāng)然就有我們熟悉的東西，如命名空間、成員變量、方法、構(gòu)造函數(shù)、析構(gòu)函數(shù)什么的，當(dāng)然類還可以繼承。有了這么一種意識(shí)，理解這段代碼就簡單多了，當(dāng)然經(jīng)過擴(kuò)展的JavaScript寫出的類在語法結(jié)構(gòu)上與傳統(tǒng)的C#、Java等類的樣子很有差別，但是我們一定要將它看成一個(gè)類。
在C#中，寫一個(gè)類首先要指定命名空間，這里也不例外。Type.registerNamespace("MyAjaxClientControl");就是指定這個(gè)類屬于MyAjaxClientControl這個(gè)命名空間，在這里Type.registerNamespace是固定用法，記住就行了。
接下來要聲明一個(gè)類，js中聲明類可沒有class這個(gè)關(guān)鍵詞，而是使用function，沒錯(cuò)，一個(gè)類就是一個(gè)function，你覺得難以理解也要理解，在這里就是這樣的。
MyAjaxClientControl.PasswordValidator = function(element) {
MyAjaxClientControl.PasswordValidator.initializeBase(this, [element]);
}
關(guān)于這行代碼，是類的聲明，同時(shí)也是構(gòu)造函數(shù)。從這里看出，一般一個(gè)控件的構(gòu)造函數(shù)需要一個(gè)參數(shù)element，其實(shí)這就是需要關(guān)聯(lián)到的DOM。因?yàn)锳SP.NET AJAX控件本身是虛的，只有和具體的DOM關(guān)聯(lián)后才能發(fā)揮作用。而構(gòu)造函數(shù)里還調(diào)用了父類的初始化函數(shù)，這里不必細(xì)究。
再往下就是有個(gè)prototype，這里才是最重要的。這個(gè)類的一切成員變量和方法都寫在里面，等會(huì)這里也是我們主要寫代碼的部分。關(guān)于prototype我不多說，想了解的朋友可以去找JavaScript的書看看，不想了解的只要知道這里放類的成員和方法就夠了?？梢钥吹?，這里已經(jīng)自動(dòng)生成了兩個(gè)方法，一個(gè)是初始化，一個(gè)是析構(gòu)函數(shù)。一般這兩個(gè)函數(shù)我們?cè)獠粍?dòng)放在那就可以了。
再往下看，看到MyAjaxClientControl.PasswordValidator.registerClass('MyAjaxClientControl.PasswordValidator', Sys.UI.Control);這一行代碼。這段代碼的作用是，告訴系統(tǒng)PasswordValidator這個(gè)函數(shù)要聲明成一個(gè)類，并且要繼承自Sys.UI.Control，一般我們自己寫的可視控件都要繼承自Sys.UI.Control。要記住NamespaceName.FunctionName.registerClass是把某個(gè)function編程類的方法，其中registerClass需要兩個(gè)基本參數(shù)，第一個(gè)是這個(gè)類的名字，第二個(gè)是要繼承的父類。其實(shí)后面還可以有參數(shù)，表明這個(gè)類要實(shí)現(xiàn)的接口。
最后一樣不用管它，那是框架需要的一行代碼。
編寫控件
在正式編寫代碼前，我們先來簡單分析一下。其實(shí)所謂編寫，就是給這個(gè)類的骨架添加合適的成員變量與方法，因?yàn)槲覀兪且瓿梢粋€(gè)類嘛。在摘要中我們介紹了，這個(gè)控件是一個(gè)密碼強(qiáng)度驗(yàn)證控件。所以，我們需要一個(gè)輸入：用戶輸入的密碼。這個(gè)輸入我們可以寫成一個(gè)數(shù)據(jù)成員。我們還需要一個(gè)輸出：密碼強(qiáng)度提示信息。我們這個(gè)空間最終要關(guān)聯(lián)的DOM是一個(gè)span或div，所以這個(gè)強(qiáng)度信息可以直接顯示在其innerHTML中。另外，我們還需要一個(gè)方法：驗(yàn)證密碼。這個(gè)方法在指定文本框失去焦點(diǎn)時(shí)被觸發(fā)，它將分析密碼強(qiáng)度，并輸出其強(qiáng)度信息。
分析到這里，我們基本確定了，我們需要一個(gè)成員變量：userPassword，它是需要被驗(yàn)證的密碼。還需要一個(gè)方法：validate，它驗(yàn)證密碼強(qiáng)度并輸出信息。下面我們來編碼。這里注意，為了使得業(yè)務(wù)邏輯盡量簡單，我們僅僅通過密碼的長度確定密碼強(qiáng)度，我們的業(yè)務(wù)邏輯是：3個(gè)字符以下視為不合法，4-8視為弱，9-12視為中，13以上視為強(qiáng)。在實(shí)際應(yīng)用中，應(yīng)該還要通過正則表達(dá)式，檢查密碼的組合情況，來確定密碼強(qiáng)度。
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
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\">密碼強(qiáng)度-弱</font>";
30 }
31 else if(9 <= passwordLength && passwordLength <= 12) {
32 tip = "<font color=\"#0000FF\">密碼強(qiáng)度-中</font>";
33 }
34 else {
35 tip = "<font color=\"#00FF00\">密碼強(qiáng)度-強(qiáng)</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 here
45 },
46 dispose: function() {
47 //Add custom dispose actions here
48 MyAjaxClientControl.PasswordValidator.callBaseMethod(this, 'dispose');
49 }
50}
51MyAjaxClientControl.PasswordValidator.registerClass('MyAjaxClientControl.PasswordValidator', Sys.UI.Control);
52
53if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
上面就是編寫好的控件。我們看到，我們和ASP.NET AJAX默認(rèn)一樣，使用了JOSN的格式，即定義成員變量時(shí)是“變量名:初始值”的格式，我們定義了一個(gè)_userPassword變量。然后，我們定義了這個(gè)變量的get和set方法，這里注意，我們一定要遵循ASP.NET AJAX規(guī)定的格式，即“get_變量名”和“set_變量名”的格式。最后定義了validator方法。
應(yīng)用控件
目前，我們只是編寫了控件，但是還沒有將它應(yīng)用于實(shí)際程序里。我們知道，控件不能獨(dú)立存在，只能應(yīng)用于程序才能看到其效果。
首先，我們?cè)贒efault.aspx頁面上增加一個(gè)密碼類型文本框和一個(gè)div，而這個(gè)div將顯示密碼強(qiáng)度驗(yàn)證的結(jié)果。其代碼很簡單。如下所示：
Default.aspx:
1<%@ 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>http://www.dwww.cn</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>
接下來，我們要運(yùn)用組件編程的思想進(jìn)行程序設(shè)計(jì)。新建一個(gè)js文件，命名為ajax.js，這個(gè)文件將成為程序的控制器。下面先貼出代碼再進(jìn)行分析：
ajax.js:
1var txtUserPassword;
2var validUserPassword;
3
4Sys.Application.add_init(onPageInit);
5
6function 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
16function txtUserPassword_onBlur()
17{
18 validUserPassword.set_userPassword(txtUserPassword.get_text());
19 validUserPassword.validate();
20}
看過前幾篇的朋友肯定能很容易理解這短代碼。注意其中的validUserPassword被賦予了一個(gè)MyAjaxClientControl.PasswordValidator的實(shí)例，這正是我們剛才編寫的那個(gè)控件。而頁面如何知道這個(gè)控件的存在呢，有沒有注意到，在Default.aspx的ScriptManager中，已經(jīng)引入了PasswordValidator.js文件，這保證了程序可以識(shí)別這個(gè)自定義控件。我們知道，這個(gè)控件的構(gòu)造函數(shù)有一個(gè)參數(shù)element，是需要關(guān)聯(lián)到的DOM元素，這里我們關(guān)聯(lián)到了pwdUserPasswordValid這個(gè)div。
還要注意的一點(diǎn)就是addHandler(get("pwdUserPassword"),"blur",txtUserPassword_onBlur);這行代碼，由于ASP.NET AJAX的TextBox控件并沒有封裝on_blur（當(dāng)控件失去焦點(diǎn)時(shí)觸發(fā)）這個(gè)事件，所以我們要在DOM的層面上為這個(gè)事件添加監(jiān)聽函數(shù)。而addHandler就是ASP.NET AJAX為我們提供的一種語法縮寫，它的原型是addHandler(DOMElement,eventName,listener)，其意思是讓listener監(jiān)聽DOMElement的eventName事件，即當(dāng)DOMElement的eventName被觸發(fā)時(shí)，執(zhí)行l(wèi)istener函數(shù)。具體到這里，就是文本框失去焦點(diǎn)時(shí)，執(zhí)行txtUserPassword_onBlur。
我們?cè)賮砜纯磘xtUserPassword_onBlur做了什么：它首先將txtUserPassword的內(nèi)容賦予validUserPassword的_userPassword變量，然后執(zhí)行其validate方法。這樣，validUserPassword就會(huì)對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證，并將結(jié)果顯示于指定的div里。
執(zhí)行效果看下圖：
可以看到，隨著不同的密碼長度，我們自己做的控件給出了相應(yīng)的密碼強(qiáng)度。每次文本框失去焦點(diǎn)時(shí)都會(huì)進(jìn)行驗(yàn)證。
結(jié)束語
這一篇中，我們自己做了一個(gè)ASP.NET AJAX控件。當(dāng)然，限于篇幅，不可能將相關(guān)的知識(shí)全部呈現(xiàn)出來，但是，希望通過做這個(gè)控件，可以讓廣大朋友對(duì)ASP.NET AJAX客戶端控件的開發(fā)有一個(gè)初步的認(rèn)識(shí)，也加深對(duì)ASP.NET AJAX客戶端控件原理的理解。相信只要不斷聯(lián)系，假以時(shí)日，朋友們一定可以隨心所欲做出自己需要的控件。
本文示例程序可以在這里下載：MyAjaxClientControl.rar
聯(lián)系客服
