ASP.NET Web Forms 4.5的新特性(二):针对HTML5的更新和Unobtrusive Validation

[来源] 达内    [编辑] 达内   [时间]2012-09-19

这次我们再介绍两个新特性:ASP.NET Web Forms 4.5中针对HTML5的更新和Unobtrusive Validation

这次我们再介绍两个新特性:ASP.NET Web Forms 4.5中针对HTML5的更新和Unobtrusive Validation。

< h2 style="margin-top: 10px; font-size: 16px; padding: 10px 5px 8px; background-color: gray; color: white; font-weight: bold; font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">针对HTML5的更新 < p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 在ASP.NET Web Forms 4.5中,控件TextBox的TextBoxMode从之前的三个(SingleLine/MultiLine/Password)增加到了16个,详细见MSDN

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">  

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 这样使得做表单类页面的时候,降会大大地降低验证的代码量,提高开发效率,将更多的人力资源放在业务逻辑上。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> FileUpload控件终于开始支持多文件上传,可以通过 AllowMultiple属性打开。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 详细使用可以参照MSDN的FileUpload类说明

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 当然还包含了如对HTML5表单的验证、HTML5的标记也可以使用“~”去根目录、增加UpdatePanel对HTML5表单的支持。

< h2 style="margin-top: 10px; font-size: 16px; padding: 10px 5px 8px; background-color: gray; color: white; font-weight: bold; font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">Unobtrusive Validation < p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">所谓Unobtrusive Validation,就是一种隐式的验证方式,将验证代码和HTML分离。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">要具体了解其改进,我们先看看ASP.NET Web Forms 4.5之前是怎么处理验证逻辑的。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">我们在页面中添加了这个简单的输入表单。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
 1 < body>
 2     < form id ="form1" runat="server" >
 3         < div>
 4              <ul>
 5                  < li>
 6                      < asp:TextBox ID ="TextBox_Number" runat ="server" TextMode ="SingleLine"></asp:TextBox >
 7                      < asp:RequiredFieldValidator  ID="RequiredFieldValidator1" runat ="server"
 8                          ErrorMessage="*Required"
 9                          ControlToValidate ="TextBox_Number"
10                          EnableClientScript="true" ></asp:RequiredFieldValidator >
11                      < asp:RangeValidator ID ="RangeValidator1" runat ="server"
12                          ControlToValidate ="TextBox_Number"
13                          ErrorMessage ="*Range 10~100"
14                          MaximumValue="100"
15                          MinimumValue="10" ></asp:RangeValidator >
16                  </ li>
17                  < li>
18                      < asp:Button ID ="Button1" runat ="server" Text ="Submit" /></ li>
19              </ul>
20         </ div>
21     </ form>
22 </ body>
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">当我们查看页面生成的源代码的时候,会发现下面这样的内容。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 后台将验证的JS代码放在了页面中,而当页面验证逻辑很复杂的时候,会产生大量的内联代码,在后面对页面做优化(如JS压缩,CDN,页面压缩)、维护的时候很不方便。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">而在ASP.NET Web Forms 4.5中可以将此类的验证逻辑做分离。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">可以在Web.config中添加下面这样的配置。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
1   < appSettings>
2     <!-- 启用Unobtrusive Validation,默认开启-->
3     < add key ="ValidationSettings:UnobtrusiveValidationMode" value ="WebForm" />
4 
5     <!-- 关闭Unobtrusive Validation-->
6     <!-- <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/> -->
7   </ appSettings>
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">或者在Application_Start中添加此段即可。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
1 void  Application_Start(object sender, EventArgs e)
2 {
3     // Enabling UnobtrusiveValidation application wide
4     ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;
5 }
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">而如果只想控制某个页面开启此功能只需加上这段代码。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
1 Page.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms;
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">现在我们再来看看生成到客户端的HTML代码的样子。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">我们发现,验证类的信息已经变成了HTML5中的表单特有的属性data-*

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">而页面中的内联JS等内容都已经被处理,且自动引入了jQuery进行验证。

资源下载