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

最新推荐文章于 2024-10-07 16:04:54 发布

田猿笔记

最新推荐文章于 2024-10-07 16:04:54 发布

阅读量783

点赞数

分类专栏： asp.net文章文章标签： asp.net validation textbox asp string server

asp.net文章专栏收录该内容

191 篇文章 0 订阅

订阅专栏

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

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

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。