国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
ASP.NET AJAX客戶端編程之旅(六)——來做一個(gè)自己的客戶端控件

ASP.NET AJAX客戶端編程之旅(六)——來做一個(gè)自己的客戶端控件

2008-9-11 18:38:50 已被閱讀:374 發(fā)表評(píng)論

摘要

通過前面的文章,我們了解了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

來源:http://www.cnblogs.com/leoo2sk

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
ScriptManager控件
下載AjaxControlToolkit并集成到VS2005中的詳細(xì)過程 - Asp.ne...
ASP.NET AJAX 控件之CalendarExtender
asp.net中使用jquery的ajax來post數(shù)據(jù)的樹控件
.NET開發(fā)人員應(yīng)該關(guān)注的七個(gè)開源項(xiàng)目
Atlas—微軟的Ajax工具包
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服