OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

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

原作者: [db:作者] 来自: [db:来源] 收藏邀请

我想对于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上。比如上图所示：单击”User name is mandatory!”，光标回到User name对应的Texbox。

现在我们来简单叙述上面的效果是如果实现的，在开始之前我想说的是，方法非常简单—或许你已经猜到了。下面是上面创建的用于登录的Web页面的HTML。

    
    >

    >

    >

    >

    >

       7:         body{}{font-family:Verdana; font-size:10px}

       8:         table{}{width:300px}

       9:         table tr{}{height:30px}

      10:         table td.firstColumn{}{width:100px; text-align:right}

      11:         table td.secondColumn{}{ text-align:left}

      12:         table span.asterisk{}{color:red}

      13:         table .textbox{}{width:150px; border:solid 1px #999999}

      14:         table .button{}{background-color: #00cc66;border:solid 1px #999999}

      15:         ul li{}{margin-bottom:5px} 

      16:         ul li a{}{color:red; text-decoration:none}

      17:         ul li a:hover{}{text-decoration:underline} 

    >

      19:    

    >
   1:  

function setFocus(control) {

var controlToValidate = document.getElementById(control);

   4:            controlToValidate.focus();

   5:        } 

   6:        

   7:    
</script>

    >

    >

    >

    >

    >

    >

    >

    />

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    &nbsp;

    />

    >

    >

    >

    >

    >

    >

    >

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

    >

    function setFocus(control)

       3:        {

    var controlToValidate = document.getElementById(control);

       5:            controlToValidate.focus();

       6:        }       

       7: </script>

二、接着我们来看看后台代码

看完了HTML，我们来看看该登录Web页面的后台代码。下面的代码片断为你展示了该Web页面背后的所有代码，所有的机关就存在于Web页面的Load时间处理方法Page_Load方法中。

    class Login : System.Web.UI.Page

       2: {

    object sender, EventArgs e)

       4:     {

    this.IsPostBack)

       6:         {

    return;

       8:         }

       9:  

    );

    );

    ;

      13:  

    this.MakeClickableErrorMessage();

      15:     }

      16:  

    void MakeClickableErrorMessage()

      18:     {

    this.Validators)

      20:         {

    string.Empty)

      22:             {

    continue;

      24:             }

    this.FindControl(validator.ControlToValidate).ClientID;

    , clientID, validator.ErrorMessage);

      27:             validator.ErrorMessage = script;

      28:         }

      29:     }

      30:  

    object source, ServerValidateEventArgs args)

      32:     {

    )

      34:         {

    false;

    return;

      37:         }

      38:  

    true;

      40:     }

      41: }

上面代码也简单得一塌糊涂，除了MakeClickableErrorMessage这个方法，其他的都不值一提。显示在ValidationSummary中原本简单的literal error message就是通过上面的这个MakeClickableErrorMessage方法转变成超链接的。

    void MakeClickableErrorMessage()

       2:     {

    this.Validators)

       4:         {

    string.Empty)

       6:             {

    continue;

       8:             }

    this.FindControl(validator.ControlToValidate).ClientID;

    , clientID, validator.ErrorMessage);

      11:             validator.ErrorMessage = script;

      12:         }

      13:     }

在上面的代码中，我遍历page中的每个验证控件。如果该验证具有对应ControlToValidate属性（对于一个验证控件来说，ControlToValidate并非一个必需的属性，如果没有指定该属性，其值为空字符串），直接进入下一个循环。然后我把原来只是弹出的文本转变成一个<a></a>块，然后再将其重新赋值给对应的Validator contorl的ErrorMessage property。比如对于rqfUserName RequiredFieldValidator来说，原来的Error message是”User name is mandatory!”,那么现在的Error message变成了：

>

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

三、ASP.NET是如何实现客户端验证的？

我们通过IE来浏览上面的Page，我们可以通过查看源文件得到最终呈现出来的Web页面的HTML。对于上面提到的登录页面，在客户端呈现出来的HTML如下面的HTML所示。

    > 

    > 

    > 

       4:     Login 

    > 

    > 

       7:         body{}{font-family:Verdana; font-size:10px} 

       8:         table{}{width:300px} 

       9:         table tr{}{height:30px} 

      10:         table td.firstColumn{}{width:100px; text-align:right} 

      11:         table td.secondColumn{}{ text-align:left} 

      12:         table span.asterisk{}{color:red} 

      13:         table .textbox{}{width:150px; border:solid 1px #999999} 

      14:         table .button{}{background-color: #00cc66;border:solid 1px #999999} 

      15:         ul li{}{margin-bottom:5px}  

      16:         ul li a{}{color:red; text-decoration:none} 

      17:         ul li a:hover{}{text-decoration:underline}  

    >    

    >
   1:  

function setFocus(control) {

var controlToValidate = document.getElementById(control);

   4:            controlToValidate.focus();

   5:        }        

   6:    
</script>
   1:  

   2: </head> 

> 

> 

   5: <div> 

 /> 

 /> 

 /> 

   9: </div> 

> 

  11: <!--

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

ASP.NET2.0网页导航技术比较发布时间：2022-07-10

HTTPError500.30-ASP.NETCoreappfailedtostart发布时间：2022-07-10

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

客服电话

电子邮件

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

二、接着我们来看看后台代码

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053