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


 
                    