使用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