创建Linked ValidationSummary深入理解ASP.NET的Validation
Posted on 2007-12-09 19:23 ilove7cup 阅读(176) 评论(0) 收藏 举报
一 、实现的效果
我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们 已经习惯了用Validator控件来验证我们在表单的输入，并通过ValidationSummary来输出我们为Validator控件设置的Error message。不知道大家有没想过进一步改进一下我们的Validation来改善我们的User Experience。比如，在ValidationSummary输出一个Link连接到对应的控件，而不是显示单纯的Error message。
比如在上图中，是一个典型的Login的Page。我们有两个必填的字段：User name和Password。为此我定义两个RequiredFieldValidator。他们的Error message分别为：”User name is mandatory!”和”Password is mandatory!”。在未输入任何值得前提下Click “Sign in”按钮，Error Message被显示在ValidationSummary上面。不过和传统的Error message不同，显示在ValidationSummary上的实际上是两个链接，Click对应的Error message，光标会设置到对应的Textbox上。比如上图所示：Click ”User name is mandatory!”，光标回到User name对应的Texbox。
二、具体实现
现在我们来简单叙述上面的效果是如果实现的，在开始之前我想说的是，方法非常简单—或许你已经猜到了：）
1．首先来看看aspx。
复制 
保存
在看到了上面的Screen shot之后再看看上面的Html，结构清晰得一目了然。所以我就不再进一步解释了。在这里我只需要提提定义在aspx的一段javascript function：setFocus。通过它把focus设置到指定的控件。
阅读 
编辑 
运行 复制 保存
2．接着我们来看看code behind。
复制 保存
Code也简单得一塌糊涂，除了MakeClickableErrorMessage这个Method，其他的都不值一提。
复制 保存
显示在ValidationSummary中原本简单的literal error message就是通过上面的这个MakeClickableErrorMessage转变成hyperlink的。在上面的code中，我遍历page中的每个Validator control。如果该Validator control有对应ControlToValidate（对于一个Validator control来说，ControlToValidate并非一个必需的property，如果没有指定该property，其值为空字符串），直接进入下一个循环。然后我把原来只是弹出的文本转变成一个<a></a>，然后再将其重新赋值给对应的Validator contorl的ErrorMessage property。
我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们 已经习惯了用Validator控件来验证我们在表单的输入，并通过ValidationSummary来输出我们为Validator控件设置的Error message。不知道大家有没想过进一步改进一下我们的Validation来改善我们的User Experience。比如，在ValidationSummary输出一个Link连接到对应的控件，而不是显示单纯的Error message。
比如在上图中，是一个典型的Login的Page。我们有两个必填的字段：User name和Password。为此我定义两个RequiredFieldValidator。他们的Error message分别为：”User name is mandatory!”和”Password is mandatory!”。在未输入任何值得前提下Click “Sign in”按钮，Error Message被显示在ValidationSummary上面。不过和传统的Error message不同，显示在ValidationSummary上的实际上是两个链接，Click对应的Error message，光标会设置到对应的Textbox上。比如上图所示：Click ”User name is mandatory!”，光标回到User name对应的Texbox。
二、具体实现
现在我们来简单叙述上面的效果是如果实现的，在开始之前我想说的是，方法非常简单—或许你已经猜到了：）
1．首先来看看aspx。
复制 保存<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!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 id="Head1" runat="server">
<title>Login</title>
<style type="text/css">
body{font-family:Verdana; font-size:10px}
table{width:300px}
table tr{height:30px}
table td.firstColumn{width:100px; text-align:right}
table td.secondColumn{ text-align:left}
table span.asterisk{color:red}
table .textbox{width:150px; border:solid 1px #999999}
table .button{background-color: #00cc66;border:solid 1px #999999}
ul li{margin-bottom:5px}
ul li a{color:red; text-decoration:none}
ul li a:hover{text-decoration:underline}
</style>
<script type="text/javascript">
function setFocus(control)
{
var controlToValidate = document.getElementById(control);
controlToValidate.focus();
}
</script>
</head>
<body style="font-family: Verdana">
<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="5px">
<tr>
<td colspan="2">
<asp:ValidationSummary runat="server" ID="vldLogin" />
</td>
</tr>
<tr>
<td class="firstColumn">
User Name: <span class="asterisk"> *</span></td>
<td class="secondColumn">
<asp:TextBox runat="server" ID="txtUserName" CssClass="textbox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rqfUserName" ControlToValidate="txtUserName" Display="None"></asp:RequiredFieldValidator>
<asp:CustomValidator runat="server" ID="ctmUserName" Display="None" OnServerValidate="ctmUserName_ServerValidate" ControlToValidate="txtUserName" ></asp:CustomValidator>
</td>
</tr>
<tr>
<td class="firstColumn">
Password: <span class="asterisk"> *</span></td>
<td class="secondColumn">
<asp:TextBox runat="server" ID="txtPassword" TextMode="Password" CssClass="textbox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rqfPassword" ControlToValidate="txtPassword" Display="None" ></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button runat="server" ID="btnSignIn" Text="Sign in" CssClass="button" />
<asp:Button runat="server" ID="ButtonCancel" Text="Cancel" CausesValidation="false"
CssClass="button" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
在看到了上面的Screen shot之后再看看上面的Html，结构清晰得一目了然。所以我就不再进一步解释了。在这里我只需要提提定义在aspx的一段javascript function：setFocus。通过它把focus设置到指定的控件。
阅读 编辑 运行 复制 保存<script type="text/javascript">
function setFocus(control)
{
var controlToValidate = document.getElementById(control);
controlToValidate.focus();
}
</script>
2．接着我们来看看code behind。
复制 保存using System;
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;
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
return;
}
this.rqfUserName.ErrorMessage = string.Format("{0} is mandatory!", "User name");
this.rqfPassword.ErrorMessage = string.Format("{0} is mandatory!", "Password");
this.ctmUserName.ErrorMessage = "Such a user has not registered!";
this.MakeClickableErrorMessage();
}
private void MakeClickableErrorMessage()
{
foreach (BaseValidator validator in this.Validators)
{
if (validator.ControlToValidate == string.Empty)
{
continue;
}
string clientID = this.FindControl(validator.ControlToValidate).ClientID;
string script = string.Format("<a href= \"javascript:setFocus('{0}');\">{1}</a>",
clientID, validator.ErrorMessage);
validator.ErrorMessage = script;
}
}
protected void ctmUserName_ServerValidate(object source, ServerValidateEventArgs args)
{
if (this.txtUserName.Text.Trim() != "adm")
{
args.IsValid = false;
return;
}
args.IsValid = true;
}
}
Code也简单得一塌糊涂，除了MakeClickableErrorMessage这个Method，其他的都不值一提。
复制 保存private void MakeClickableErrorMessage()
{
foreach (BaseValidator validator in this.Validators)
{
if (validator.ControlToValidate == string.Empty)
{
continue;
}
string clientID = this.FindControl(validator.ControlToValidate).ClientID;
string script = string.Format("<a href= \"javascript:setFocus('{0}');\">{1}</a>",
clientID, validator.ErrorMessage);
validator.ErrorMessage = script;
}
}
显示在ValidationSummary中原本简单的literal error message就是通过上面的这个MakeClickableErrorMessage转变成hyperlink的。在上面的code中，我遍历page中的每个Validator control。如果该Validator control有对应ControlToValidate（对于一个Validator control来说，ControlToValidate并非一个必需的property，如果没有指定该property，其值为空字符串），直接进入下一个循环。然后我把原来只是弹出的文本转变成一个<a></a>，然后再将其重新赋值给对应的Validator contorl的ErrorMessage property。
浙公网安备 33010602011771号