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

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

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

这里我将上述功能封装为Atlas中的Behavior，以方便重用。关于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必须有如下的签名，其中传入一个待检查的用户名，返回检查后的布尔结果（可用/不可用）：

public   bool  CheckUserName( string  userNameCandidate)

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

function  blurHandler()  {
    if (this.control.element.value == '') {
        _checkResultLabel.innerHTML = '';
        return;
    }
    
    Sys.Net.ServiceMethod.invoke(
        _serviceName, 
        _methodName, 
        '',
        { userNameCandidate : this.control.element.value},
        _onMethodComplete
    );
}

function  _onMethodComplete(result)
{
    _checkResultLabel.innerHTML = result ? _validMessage : _invalidMessage;
}

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

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

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

using  System;
using  System.Web;
using  System.Web.Services;
using  System.Web.Services.Protocols;

[WebService(Namespace  =   " http://www.dflying.net/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
public   class  UserRegisterService : System.Web.Services.WebService
{
    private static string[] m_userData = { "Dflying", "Admin" };

    [WebMethod]
    public bool CheckUserName(string userNameCandidate)
    {
        foreach (string s in m_userData)
        {
            if (s == userNameCandidate) 
                return false;
        }
        return true;
    }
}

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

< atlas:ScriptManager  runat ="server"  ID ="ScriptManager1" >
     < Scripts >
         < atlas:ScriptReference  Path ="ValidateUserNameBehavior.js"   />
     </ Scripts >
</ atlas:ScriptManager >

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

< div >
    UserName:
     < input  type ="text"  id ="userName"  class ="input"   />
     < span  id ="userNameError"   ></ span >
</ div >

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

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

浏览器中测试一下，输入一个可用的用户名：

输入Dflying，哦已经被注册了：

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