随笔- 313  评论- 12176  文章- 1 

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

作者:Dflying Chen http://dflying.cnblogs.com/

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

这里我将上述功能封装为Atlas中的Behavior,以方便重用。关于AtlasBehavior,请参考: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以及检查用户名的方法,这里为了演示,实现的逻辑很简单,只有DflyingAdmin两个用户,您可以根据实际情况更改:

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>

最后是AtlasXML 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://www.cnblogs.com/Files/dflying/ValidateUserNameBehavior.zip

posted on 2006-05-31 11:00  Dflying Chen  阅读(...)  评论(...编辑  收藏