很多网站都使用了ajax技术进行数据验证,如淘宝网站。那么我们如果使用ASP.NET怎样实现这样的效果呢?
1、在用户名框输入An两个字符,系统立刻无刷新响应错误提示"少于3个字符"
2、当我接着输入“dy”以完成用户名“Andy”的输入,系统立刻无刷新响应提示,系统进行了与数据库校验,发现用户名不存在,无刷新显示提示"用户名不存在,可以使用";
3、当我改为用户名“piaoyi”输入时,系统无刷新的提示“用户名存在”,也进行了与数据库的通讯;
AJAXPro.Net简介
AJAXPro.Net是一个优秀的AJAX框架, 在实际应用中只要添加其DLL引用并进行简单的配置,
即可以非常方便的在客户端直接调用服务端方法, 实现验证目的.
配置Web.config:
//VS.NET 2005中配置
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2" />
</httpHandlers>
//VS.NET 2003中配置
<httpHandlers>
<add verb="POST,GET" path="AJAXpro/*.ashx" type="AJAXPro.AJAXHandlerFactory, AJAXPro" />
</httpHandlers>
//AjaxPro.dll和AjaxPro2.dll都上传到我的资源里面了,有需要的话,可以去下载~
代码实现:
1,aspx代码如下:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd" >
< HTML XMLns ="http://www.w3.org/1999/xHTML" >
< head runat ="server" >
< title > Verify </ title >
< script language ="jscript" >
function VerifyUsername(name)
{
Verify.GetReturnCode(name,IsUsernameExist_callback);
}
function IsUsernameExist_callback(res)
{
var msg = document.getElementById("lblMessage");
var bRet = res.value;
if(bRet == "0")
{
msg.innerHTML = "用户名存在!";
msg.style.color = "green";
}
else if(bRet == "1")
{
msg.innerHTML = "用户名长度必须在3到15之间,且不包含字母、数字和下划线以外的字符!";
msg.style.color = "red";
}
else
{
msg.innerHTML = "用户名不存在!";
msg.style.color = "red";
}
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< h1 > 基于Ajax的数据验证 </ h1 >
< hr />
< ASP:Label ID ="Label1" runat ="server" > 用户名: </ ASP:Label >
< input type ="text" id ="tbUsername" onkeyup ="VerifyUsername(this.value)" />< br />
< ASP:Label ID ="lblMessage" runat ="server" ></ ASP:Label >
</ div >
</ form >
</ body >
</ HTML >
2 .cs代码如下:
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HTMLControls;
using System.Text.RegularExpressions;
public partial class Verify : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Verify));
//作用是向客户端输出下面的代码:
// < script type ="text/JavaScript" src ="/ajaxprotest/ajaxpro/prototype.ashx" ></ script >
// < script type ="text/JavaScript" src ="/ajaxprotest/ajaxpro/core.ashx" ></ script >
// < script type ="text/JavaScript" src ="/ajaxprotest/ajaxpro/converter.ashx" ></ script >
// < script type ="text/JavaScript" src ="/ajaxprotest/ajaxpro/Verify,App_Web_elgsobcn.ashx" ></ script >
}
//加上[AjaxPro.AjaxMethod],才能被客户端访问
[AjaxPro.AjaxMethod]
public string GetReturnCode(string strUsername)
{
if (!IsValidUsername(strUsername))
{
return "1";
}
else if (!IsUsernameExist(strUsername))
{
return "2";
}
else
{
return "0";
}
}
private bool IsUsernameExist(string strUsername)
{
bool bRet = false;
switch (strUsername.ToLower())
{
case "test":
case "tom":
case "jack":
case "ajax":
case "ASPnet":
case "nic":
bRet = true;
break;
}
return bRet;
}
private bool IsValidUsername(string strUsername)
{
return (Regex.IsMatch(strUsername, @"^(/w{3,15})$"));
}
private bool IsValidEmail(string strEmail)
{
return (Regex.IsMatch(strEmail, @"^/w+((-/w+)(/./w+))*/@[A-Za-z0-9]+((/.-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$"));
}
}