使用ASP.NET Atlas开发实时验证用户名是否被注册的自定义Behavior

灰太狼 2022-03-28 15:54 159阅读 0赞

作者：Dflying Chen （ [http://dflying.cnblogs.com/][http_dflying.cnblogs.com] ）

昨天看到园内[adonio][]朋友的[使用CustomValidator类及时验证用户名][CustomValidator]，这是一个很常见的功能需求，且采用AJAX的方式可以带给用户更好的体验。adonio朋友使用的是未经包装的AJAX方法，其实我们完全可以基于现有的Atlas框架，开发出更易使用的组件。

这里我将上述功能封装为Atlas中的Behavior，以方便重用。关于Atlas的Behavior，请参考：[在ASP.NET Atlas中创建自定义的Behavior][ASP.NET Atlas_Behavior]。

该检验用户名是否被注册的**ValidateUserNameBehavior**有如下几个属性：

1.  **serviceName**：获取或设定检查用户名的Web Service的路径名称。您必须指定这个属性。
2.  **methodName**：获取或设定检查用户名的Web Method名称。您必须指定这个属性。
3.  **checkResultLabelID**：获取或设定显示检查结果的DOM元素的ID。您必须指定这个属性。
4.  **validMessage**：获取或设置通过检查（用户名可用）时显示的文字。
5.  **invalidMessage**：获取或设置未通过检查（用户名不可用）时显示的文字。

同时，服务器端检查用户名的Web Method必须有如下的签名，其中传入一个待检查的用户名，返回检查后的布尔结果（可用/不可用）：

![None.gif][] public   bool  CheckUserName( string  userNameCandidate)

关于这个**ValidateUserNameBehavior**的实现，您可以下载源代码后结合[在ASP.NET Atlas中创建自定义的Behavior][ASP.NET Atlas_Behavior]中提到的五个步骤分析，其实是非常简单的。其中需要注意的是如下部分：

![ExpandedBlockStart.gif][None.gif] ![ContractedBlock.gif][None.gif] function  blurHandler()  ![dot.gif][] \{  
![ExpandedSubBlockStart.gif][None.gif]![ContractedSubBlock.gif][None.gif]    if (this.control.element.value == '') ![dot.gif][]\{  
![InBlock.gif][None.gif]        \_checkResultLabel.innerHTML = '';  
![InBlock.gif][None.gif]        return;  
![ExpandedSubBlockEnd.gif][None.gif]    \}  
![InBlock.gif][None.gif]      
![InBlock.gif][None.gif]    Sys.Net.ServiceMethod.invoke(  
![InBlock.gif][None.gif]        \_serviceName,   
![InBlock.gif][None.gif]        \_methodName,   
![InBlock.gif][None.gif]        '',  
![ExpandedSubBlockStart.gif][None.gif]![ContractedSubBlock.gif][None.gif]        ![dot.gif][]\{ userNameCandidate : this.control.element.value\},  
![InBlock.gif][None.gif]        \_onMethodComplete  
![InBlock.gif][None.gif]    );  
![ExpandedBlockEnd.gif][None.gif]\}   
![None.gif][]  
![None.gif][] function  \_onMethodComplete(result)  
![ExpandedBlockStart.gif][None.gif]![ContractedBlock.gif][None.gif] ![dot.gif][] \{  
![InBlock.gif][None.gif]    \_checkResultLabel.innerHTML = result ? \_validMessage : \_invalidMessage;  
![ExpandedBlockEnd.gif][None.gif]\}

在该TextBox 失去输入焦点时候blurHandler() 将被调用，并且使用AJAX 方式发送检查用户名的请求到指定的Web Service 。在回调函数onMethodComplete() 中，根据返回值设置相应的显示结果。

作为开发者，**使用这个****ValidateUserNameBehavior****非常简单**，请看如下的实例：

首先创建一个Web Service以及检查用户名的方法，这里为了演示，实现的逻辑很简单，只有Dflying和Admin两个用户，您可以根据实际情况更改：

![None.gif][] using  System;  
![None.gif][] using  System.Web;  
![None.gif][] using  System.Web.Services;  
![None.gif][] using  System.Web.Services.Protocols;  
![None.gif][]  
![None.gif][]\[WebService(Namespace  =   " http://www.dflying.net/ " )\]  
![None.gif][]\[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1\_1)\]  
![None.gif][] public   class  UserRegisterService : System.Web.Services.WebService  
![ExpandedBlockStart.gif][None.gif]![ContractedBlock.gif][None.gif] ![dot.gif][] \{  
![ExpandedSubBlockStart.gif][None.gif]![ContractedSubBlock.gif][None.gif]    private static string\[\] m\_userData = ![dot.gif][]\{ "Dflying", "Admin" \};  
![InBlock.gif][None.gif]  
![InBlock.gif][None.gif]    \[WebMethod\]  
![InBlock.gif][None.gif]    public bool CheckUserName(string userNameCandidate)  
![ExpandedSubBlockStart.gif][None.gif]![ContractedSubBlock.gif][None.gif]    ![dot.gif][]\{  
![InBlock.gif][None.gif]        foreach (string s in m\_userData)  
![ExpandedSubBlockStart.gif][None.gif]![ContractedSubBlock.gif][None.gif]        ![dot.gif][]\{  
![InBlock.gif][None.gif]            if (s == userNameCandidate)   
![InBlock.gif][None.gif]                return false;  
![ExpandedSubBlockEnd.gif][None.gif]        \}  
![InBlock.gif][None.gif]        return true;  
![ExpandedSubBlockEnd.gif][None.gif]    \}  
![ExpandedBlockEnd.gif][None.gif]\}

然后再用户注册的页面上添加ScriptManager，并且引用这个ValidateUserNameBehavior.js文件：

![None.gif][] < atlas:ScriptManager  runat ="server"  ID ="ScriptManager1" >   
![None.gif][]     < Scripts >   
![None.gif][]         < atlas:ScriptReference  Path ="ValidateUserNameBehavior.js"   />   
![None.gif][]     </ Scripts >   
![None.gif][] </ atlas:ScriptManager >

然后是提供用户输入用户名的input，以及相应的显示检验结果的span：

![None.gif][] < div >   
![None.gif][]    UserName:  
![None.gif][]     < input  type ="text"  id ="userName"  class ="input"   />   
![None.gif][]     < span  id ="userNameError"   ></ span >   
![None.gif][] </ div >

最后是Atlas的XML Script，将上面的input提升为Atlas TextBox控件，在它的Behavior中添加我们的ValidateUserNameBehavior，并指定该Behavior的属性：

![None.gif][] < script  type ="text/xml-script" >   
![None.gif][]     < page  xmlns:script ="http://schemas.microsoft.com/xml-script/2005" >   
![None.gif][]         < components >   
![None.gif][]             < textBox  id ="userName" >   
![None.gif][]                 < behaviors >   
![None.gif][]                     < validateUserNameBehavior  checkResultLabelID ="userNameError"  serviceName ="UserRegisterService.asmx"   
![None.gif][]                        methodName ="CheckUserName"   />   
![None.gif][]                 </ behaviors >   
![None.gif][]             </ textBox >   
![None.gif][]         </ components >   
![None.gif][]     </ page >   
![None.gif][] </ script >

浏览器中测试一下，输入一个可用的用户名：  
![validateUserNameBehavior1.JPG][]

输入Dflying，哦已经被注册了：  
![validateUserNameBehavior2.JPG][]

该示例程序以及相应的ValidateUserNameBehavior的源代码可以在此下载：[http://files.cnblogs.com/dflying/ValidateUserNameBehavior.zip][http_files.cnblogs.com_dflying_ValidateUserNameBehavior.zip]

[http_dflying.cnblogs.com]: http://dflying.cnblogs.com/
[adonio]: http://adonio.cnblogs.com/
[CustomValidator]: http://adonio.cnblogs.com/archive/2006/05/30/413208.html
[ASP.NET Atlas_Behavior]: http://dflying.cnblogs.com/archive/2006/04/12/373419.html
[None.gif]: 
[dot.gif]: /images/20220328/ef1eb70aa56b480a8e6daf221ede71f7.png
[validateUserNameBehavior1.JPG]: /images/20220328/bfe08f3721054acdb214163c28e0629d.png
[validateUserNameBehavior2.JPG]: /images/20220328/9c0d706dc3f3418ba80bc502a889c1e9.png
[http_files.cnblogs.com_dflying_ValidateUserNameBehavior.zip]: http://files.cnblogs.com/dflying/ValidateUserNameBehavior.zip