Artech

Develop every application as an art using the most suitable technologies!

常用链接

统计

积分与排名

CnBlogs

专家的Blog|主页

最新评论

[原创]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">&nbsp;*</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">&nbsp;*</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" />&nbsp;&nbsp;&nbsp;
                        <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。