使用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的源代码可以在此下载：https://files.cnblogs.com/dflying/ValidateUserNameBehavior.zip