登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

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

2010-06-25 14:07:19|  分类: .net技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

摘要

      通过前面的文章,我们了解了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
 5ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境MyAjaxClientControl.PasswordValidator = function(element) {
 6    MyAjaxClientControl.PasswordValidator.initializeBase(this, [element]);
 7}

 8
 9ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境MyAjaxClientControl.PasswordValidator.prototype = {
10ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境    initialize: function() {
11        MyAjaxClientControl.PasswordValidator.callBaseMethod(this'initialize');
12        
13        // Add custom initialization here
14    }
,
15ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境    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需要两个基本参数,第一个是这个类的名字,第二个是要继承的父类。其实后面还可以有参数,表明这个类要实现的接口。

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

编写控件

      在正式编写代码前,我们先来简单分析一下。其实所谓编写,就是给这个类的骨架添加合适的成员变量与方法,因为我们是要完成一个类嘛。在摘要中我们介绍了, 这个控件是一个密码强度验证控件。所以,我们需要一个输入:用户输入的密码。这个输入我们可以写成一个数据成员。我们还需要一个输出:密码强度提示信息。 我们这个空间最终要关联的DOM是一个span或div,所以这个强度信息可以直接显示在其innerHTML中。另外,我们还需要一个方法:验证密码。 这个方法在指定文本框失去焦点时被触发,它将分析密码强度,并输出其强度信息。

      分析到这里,我们基本确定了,我们需要一个成员变量:userPassword,它是需要被验证的密码。还需要一个方法:validate,它验证密码强 度并输出信息。下面我们来编码。这里注意,为了使得业务逻辑尽量简单,我们仅仅通过密码的长度确定密码强度,我们的业务逻辑是:3个字符以下视为不合 法,4-8视为弱,9-12视为中,13以上视为强。在实际应用中,应该还要通过正则表达式,检查密码的组合情况,来确定密码强度。

PasswordValidator.js:

 1/// <reference name="MicrosoftAjax.js"/>
 2
 3Type.registerNamespace("MyAjaxClientControl");
 4
 5ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境MyAjaxClientControl.PasswordValidator = function(element) {
 6    MyAjaxClientControl.PasswordValidator.initializeBase(this, [element]);
 7}

 8
 9ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境MyAjaxClientControl.PasswordValidator.prototype = {
10
11    _userPassword: null,
12    
13ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境    get_userPassword: function() {
14        return this._userPassword;
15    }
,
16    
17ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境    set_userPassword: function(value) {
18        this._userPassword = value;
19    }
,
20    
21ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境    validate: function() {
22        var tip;
23        var passwordLength = this.get_userPassword().length;
24        
25ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境        if(passwordLength <= 3{
26            tip = "<font color=\"#FF0000\">密码不合法,长度太短</font>";
27        }

28ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境        else if(4 <= passwordLength &&  passwordLength <= 8{
29            tip = "<font color=\"#666600\">密码强度-弱</font>";
30        }

31ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境        else if(9 <= passwordLength && passwordLength <= 12{
32            tip = "<font color=\"#0000FF\">密码强度-中</font>";
33        }

34ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境        else {
35            tip = "<font color=\"#00FF00\">密码强度-强</font>";
36        }

37        
38        this.get_element().innerHTML = tip;
39    }
,
40
41ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境    initialize: function() {
42        MyAjaxClientControl.PasswordValidator.callBaseMethod(this'initialize');
43        
44        // Add custom initialization here
45    }
,
46ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境    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默认一样,使用了JOSN的格式,即定义成员变量时是“变量名:初始值”的格式,我们定义了一个_userPassword变量。然后,我们定义 了这个变量的get和set方法,这里注意,我们一定要遵循ASP.NET AJAX规定的格式,即“get_变量名”和“set_变量名”的格式。最后定义了validator方法。

应用控件

      目前,我们只是编写了控件,但是还没有将它应用于实际程序里。我们知道,控件不能独立存在,只能应用于程序才能看到其效果。 

      首先,我们在Default.aspx页面上增加一个密码类型文本框和一个div,而这个div将显示密码强度验证的结果。其代码很简单。如下所示:

Default.aspx:

 1ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境<%@ 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">
12ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境        <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:

 1var txtUserPassword;
 2var validUserPassword;
 3
 4Sys.Application.add_init(onPageInit);
 5
 6function onPageInit()
 7ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境{
 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()
17ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件 - 每天积累一点 - 学无止境{
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

  评论这张
 
阅读(612)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018