您的位置：首页 > 编程语言 > ASP

ASP.NET：创建Linked ValidationSummary, 深入理解ASP.NET的Validation

2007-11-09 16:41 465 查看

ASP.NET：创建Linked ValidationSummary, 深入理解ASP.NET的Validation

一、实现的效果

我想对于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">

<title>Login</title>

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>

function setFocus(control)

{

var controlToValidate = document.getElementById(control);

controlToValidate.focus();

}

</script>

</head>

<div>

<tr>

<asp:ValidationSummary runat="server" ID="vldLogin" />

</td>

</tr>

<tr>

User Name: <span class="asterisk"> *</span></td>

<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>

Password: <span class="asterisk"> *</span></td>

<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>

<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设置到指定的控件。

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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航