[原创]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。

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Login.aspx.cs"Inherits="Login"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Login</title>
<styletype="text/css">
body{}{font-family:Verdana;font-size:10px}
table{}{width:300px}
tabletr{}{height:30px}
tabletd.firstColumn{}{width:100px;text-align:right}
tabletd.secondColumn{}{text-align:left}
tablespan.asterisk{}{color:red}
table.textbox{}{width:150px;border:solid1px#999999}
table.button{}{background-color:#00cc66;border:solid1px#999999}
ulli{}{margin-bottom:5px}
ullia{}{color:red;text-decoration:none}
ullia:hover{}{text-decoration:underline}
</style>

<scripttype="text/javascript">
functionsetFocus(control)
{
varcontrolToValidate=document.getElementById(control);
controlToValidate.focus();
}

</script>
</head>
<bodystyle="font-family:Verdana">
<formid="form1"runat="server">
<div>
<tablecellpadding="0"cellspacing="5px">
<tr>
<tdcolspan="2">
<asp:ValidationSummaryrunat="server"ID="vldLogin"/>
</td>
</tr>
<tr>
<tdclass="firstColumn">
UserName:<spanclass="asterisk">&nbsp;*</span></td>
<tdclass="secondColumn">
<asp:TextBoxrunat="server"ID="txtUserName"CssClass="textbox"></asp:TextBox>
<asp:RequiredFieldValidatorrunat="server"ID="rqfUserName"ControlToValidate="txtUserName"Display="None"></asp:RequiredFieldValidator>
<asp:CustomValidatorrunat="server"ID="ctmUserName"Display="None"OnServerValidate="ctmUserName_ServerValidate"ControlToValidate="txtUserName"></asp:CustomValidator>
</td>
</tr>
<tr>
<tdclass="firstColumn">
Password:<spanclass="asterisk">&nbsp;*</span></td>
<tdclass="secondColumn">
<asp:TextBoxrunat="server"ID="txtPassword"TextMode="Password"CssClass="textbox"></asp:TextBox>
<asp:RequiredFieldValidatorrunat="server"ID="rqfPassword"ControlToValidate="txtPassword"Display="None"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<tdcolspan="2"align="center">
<asp:Buttonrunat="server"ID="btnSignIn"Text="Signin"CssClass="button"/>&nbsp;&nbsp;&nbsp;
<asp:Buttonrunat="server"ID="ButtonCancel"Text="Cancel"CausesValidation="false"
CssClass="button"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

在看到了上面的Screen shot之后再看看上面的Html，结构清晰得一目了然。所以我就不再进一步解释了。在这里我只需要提提定义在aspx的一段javascript function：setFocus。通过它把focus设置到指定的控件。

<scripttype="text/javascript">
functionsetFocus(control)
{
varcontrolToValidate=document.getElementById(control);
controlToValidate.focus();
}
</script>

2．接着我们来看看code behind。

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;

publicpartialclassLogin:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(this.IsPostBack)
{
return;
}

this.rqfUserName.ErrorMessage=string.Format("{0}ismandatory!","Username");
this.rqfPassword.ErrorMessage=string.Format("{0}ismandatory!","Password");
this.ctmUserName.ErrorMessage="Suchauserhasnotregistered!";

this.MakeClickableErrorMessage();
}

privatevoidMakeClickableErrorMessage()
{
foreach(BaseValidatorvalidatorinthis.Validators)
{
if(validator.ControlToValidate==string.Empty)
{
continue;
}
stringclientID=this.FindControl(validator.ControlToValidate).ClientID;
stringscript=string.Format("<ahref=\"javascript:setFocus('{0}');\">{1}</a>",clientID,validator.ErrorMessage);
validator.ErrorMessage=script;
}
}

protectedvoidctmUserName_ServerValidate(objectsource,ServerValidateEventArgsargs)
{
if(this.txtUserName.Text.Trim()!="adm")
{
args.IsValid=false;
return;
}

args.IsValid=true;
}
}

Code也简单得一塌糊涂，除了MakeClickableErrorMessage这个Method，其他的都不值一提。

privatevoidMakeClickableErrorMessage()
{
foreach(BaseValidatorvalidatorinthis.Validators)
{
if(validator.ControlToValidate==string.Empty)
{
continue;
}
stringclientID=this.FindControl(validator.ControlToValidate).ClientID;
stringscript=string.Format("<ahref=\"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。

比如对于rqfUserNameRequiredFieldValidator来说，原来的Error message是”User name is mandatory!”,那么现在的Error message变成了：

<ahref=”javascript:setFocus(‘txtUserName’);”>Usernameismandatory!</a>

三、ASP.NET是如何实现Validation的

上面只是一个简单的小窍门，我们以这个Sample为例，来进一步介绍ASP.NET如何尽心Validation的。为了简单起见，在这里我没法讨论所有的Validator control。只介绍RequiredFieldValidator和CustomValidator这两种Validator control的处理流程。

1．Client side Validation

我们通过IE来浏览上面的Page，通过参看Source code，可以看到最后Render出来的html：

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
http://www.cnblogs.c

分享到：

asp.net千奇百怪的日历【月儿原创】 | C#利用钩子控制鼠标【月儿原创】

• 2007-05-12 01:26
• 浏览 756
• 评论(0)
• 查看更多