最近评论
正在载入评论列表...
3.2.2 数据验证的实现
例3-3和例3-4已经实现了一个简易的基于ASP.NET的Ajax框架，接下来的工作则是在Verify.aspx页面中使用它们实现Ajax应用。
首先为用户名输入框控件增加“onkeyup”响应函数。
<asp:TextBox id="tbUsername" runat="server" onkeyup="CheckUsername
(this.value)"></asp:TextBox>
然后，新建一个CallBackObject对象，为它增加OnComplete和OnError响应函数。
<script type="text/javascript">
var Cbo = new CallBackObject();
Cbo.OnComplete = Cbo_Complete;
Cbo.OnError = Cbo_Error;
function CheckUsername(Username)
{
var msg = document.getElementById('lblMessage');
if( Username.length > 0 )
{
Cbo.DoCallBack('tbUsername', '');
}
else
{
Cbo.AbortCallBack();
msg.innerHTML = '';
}
}
function Cbo_Complete(responseText, responseXML)
{
var msg = document.getElementById('lblMessage');
if( responseText == 'True' )
{
msg.innerHTML = '用户名存在！';
msg.style.color = 'green';
}
else
{
msg.innerHTML = '用户名不存在！';
msg.style.color = 'red';
}
}
function Cbo_Error(status, statusText, responseText)
{
alert(responseText);
}
</script>
最后，在Verify.aspx.cs中为用户名输入控件tbUsername，添加TextChanged事件响应函数。
private void tbUsername_TextChanged(object sender, System.EventArgs e)
{
if( !CallBackHelper.IsCallBack )
return;
string uName = tbUsername.Text;
try
{
CallBackHelper.Write(IsUsernameExist(uName).ToString());
}
catch( Exception ex )
{
CallBackHelper.HandleError( ex );
}
}
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;
}
Verify.aspx和Verify.aspx.cs的完整代码如例3-5和例3-6所示，Verify.aspx页面的运行效果如图3-2所示。
(a) 输入“te”时 (b) 输入“tes”时
(c) 输入“test”时 (d) 输入“test1”时
图3.2 基于Ajax的数据验证
在运行该页面时，用户只需要输入用户名，页面会实时更新下方的提示信息，通知用户输入的用户名是否存在或者用户名是否合法，整个过程中不存在任何的页面刷新过程。与例3-1和例3-2中的实现方式相比，虽然程序上只是细微的改进，但是却可以为用户体验带来很大的改善。
【例3-5】Verify.aspx
<%@ Page language="c#" Codebehind="Verify.aspx.cs" AutoEventWireup="false"
Inherits="ch32.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 type="text/javascript" src="CallBackObject.js"></script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<script type="text/javascript">
var Cbo = new CallBackObject();
Cbo.OnComplete = Cbo_Complete;
Cbo.OnError = Cbo_Error;
function CheckUsername(Username)
{
var msg = document.getElementById('lblMessage');
if( Username.length > 0 )
{
Cbo.DoCallBack('tbUsername', '');
}
else
{
Cbo.AbortCallBack();
msg.innerHTML = '';
}
}
function Cbo_Complete(responseText, responseXML)
{
var msg = document.getElementById('lblMessage');
if (responseText == '0')
{
msg.innerHTML = '用户名存在！';
msg.style.color = 'green';
}
else if (responseText == '1')
{
msg.innerHTML =
'用户名长度必须在3到15之间，且不包含字母、数字和下划线以外的字符！';
msg.style.color = 'red';
}
else
{
msg.innerHTML = '用户名不存在！';
msg.style.color = 'red';
}
}
function Cbo_Error(status, statusText, responseText)
{
alert(responseText);
}
</script>
<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="CheckUsername
(this.value)" />
<br>
<asp:Label id="lblMessage" runat="server"></asp:Label>
</form>
</body>
</HTML>
【例3-6】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 ch32
{
/// <summary>
/// Verify 的摘要说明
/// </summary>
public class Verify : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox tbUsername;
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Label Label2;
protected System.Web.UI.WebControls.Label lblMessage;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容
/// </summary>
private void InitializeComponent()
{
this.tbUsername.TextChanged +=
new System.EventHandler(this.tbUsername_TextChanged);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void tbUsername_TextChanged(object sender, System.EventArgs e)
{
if( !CallBackHelper.IsCallBack )
return;
string strName = tbUsername.Text;
try
{
string strReturnCode;
if (!IsValidUsername(strName))
{
strReturnCode = "1";
}
else if (!IsUsernameExist(strName))
{
strReturnCode = "2";
}
else
{
strReturnCode = "0";
}
CallBackHelper.Write(strReturnCode);
}
catch( Exception ex )
{
CallBackHelper.HandleError( ex );
}
}
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})$"));
}
}
}
图书导读
