最近评论
正在载入评论列表...
3.3 应用AjaxPro.NET实现数据验证
上一节中实现了基于Ajax的应用，虽然效果不错，但是还是需要编写不少的JavaScript代码，而且JavaScript的调试和测试也是比较繁琐的。实际上，利用现有的Ajax开源框架，可以大大简化开发Ajax应用的工作量。
本节将向读者介绍一个优秀的Ajax框架
AjaxPro.NET，通过它可以在客户端访问服务器端的.NET方法。AjaxPro.NET的可执行程序、代码及文档可以从以下网址下载得到：http://www.schwarz-interactive.de/。
使用AjaxPro.NET的第一步是向ASP.NET Web应用程序项目中添加AjaxPro.dll的引用，然后需要修改Web.config配置文件，代码如例3-7所示。这一步配置的主要作用是保证客户端向“ajaxpro/*.ashx”的请求（POST和GET）都被AjaxPro.AjaxHandlerFactory拦截。
【例3-7】Web.config
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx"
type="AjaxPro.AjaxHandlerFactory, AjaxPro" />
</httpHandlers>
......
</system.web>
</configuration>
接下来是在Web窗体的Page_Load方法中增加一行：
AjaxPro.Utility.RegisterTypeForAjax(typeof(Verify));
其作用是向客户端输出下面的代码：
<script type="text/javascript" src="/ch33/ajaxpro/core.ashx"></script>
<script type="text/javascript" src="/ch33/ajaxpro/ch33.Verify,ch33.ashx"></script>
在C#代码中定义一个公用方法IsUsernameExist，注意需要加上[Ajax.AjaxMethod]标记，这样才能够被客户端访问。
[AjaxPro.AjaxMethod]
public bool IsUsernameExist(string strUsername)
{
bool bRet = false;
switch (strUsername.ToLower())
{
case "test":
case "tom":
case "jack":
case "ajax":
case "aspnet":
bRet = true;
break;
}
return bRet;
}
在客户端定义相应的回调函数（callback），并且按照下面的方式调用服务器定义的方法。服务器端方法返回的结果会作为输入参数（res）提供给回调函数。
function IsUsernameExist_callback(res)
{
var msg = document.getElementById('lblMessage');
var bRet = res.value;
if (bRet == true)
{
msg.innerHTML = '用户名存在！';
msg.style.color = 'green';
}
else
{
msg.innerHTML = '用户名不存在！';
msg.style.color = 'red';
}
}
function VerifyUsername(name)
{
ch33.Verify.IsUsernameExist(name, IsUsernameExist_callback);
}
这样，一个基于AjaxPro.NET的数据验证应用就完成了。AjaxPro.NET和3.2节中的实现思路不同，它通过AjaxPro.AjaxHandlerFactory拦截请求的方式，实现了客户端和服务器端方法的映射，从而为客户端调用服务器端方法提供了可能。虽然两者实现的思路不同，但核心部分均是通过XMLHttpRequest对象实现异步的请求，读者可以体会到为什么XMLHttpRequest是Ajax技术的核心内容。
利用AjaxPro.NET实现的数据验证页面代码如例3-8和例3-9所示。
【例3-8】Verify.aspx
<%@ Page language="c#" Codebehind="Verify.aspx.cs" AutoEventWireup="false"
Inherits="ch33.Verify" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Verify</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/
intellisense/ie5">
<script language=jscript>
function VerifyUsername(name)
{
ch33.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" method="post" runat="server">
<asp:Label id="Label2" runat="server" Font-Names="黑体,Arial Black"
Font-Bold="True"
Font-Size="X-Large">基于Ajax的数据验证</asp:Label>
<hr>
<asp:Label id="Label1" runat="server">用户名：</asp:Label>
<asp:TextBox id="tbUsername" runat="server" onkeyup="VerifyUsername
(this.value)"/>
<br>
<asp:Label id="lblMessage" runat="server"></asp:Label>
</form>
</body>
</HTML>
【例3-9】Verify.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;
namespace ch33
{
/// <summary>
/// Verify 的摘要说明
/// </summary>
public class Verify : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.TextBox tbUsername;
protected System.Web.UI.WebControls.Label lblMessage;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
AjaxPro.Utility.RegisterTypeForAjax(typeof(Verify));
}
[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":
bRet = true;
break;
}
return bRet;
}
private bool IsValidUsername(string strUsername)
{
return (Regex.IsMatch(strUsername, @"^(\w{3,15})$"));
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
