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


前一篇文章中我們介紹了兩個新特性:強類型數據控件和Bundling。

這次我們再介紹兩個新特性:ASP.NET Web Forms 4.5中針對HTML5的更新和Unobtrusive Validation。

針對HTML5的更新

在ASP.NET Web Forms 4.5中,控件TextBox的TextBoxMode從之前的三個(SingleLine/MultiLine/Password)增加到了16個,詳細見MSDN

 

這樣使得做表單類頁面的時候,降會大大地降低驗證的代碼量,提高開發效率,將更多的人力資源放在業務邏輯上。

FileUpload控件終於開始支持多文件上傳,可以通過AllowMultiple屬性打開。

詳細使用可以參照MSDN的FileUpload類說明

當然還包含了如對HTML5表單的驗證、HTML5的標記也可以使用“~”去根目錄、增加UpdatePanel對HTML5表單的支持。

Unobtrusive Validation

所謂Unobtrusive Validation,就是一種隱式的驗證方式,將驗證代碼和HTML分離。

要具體了解其改進,我們先看看ASP.NET Web Forms 4.5之前是怎么處理驗證邏輯的。

我們在頁面中添加了這個簡單的輸入表單。

 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 >

當我們查看頁面生成的源代碼的時候,會發現下面這樣的內容。

后台將驗證的JS代碼放在了頁面中,而當頁面驗證邏輯很復雜的時候,會產生大量的內聯代碼,在后面對頁面做優化(如JS壓縮,CDN,頁面壓縮)、維護的時候很不方便。

而在ASP.NET Web Forms 4.5中可以將此類的驗證邏輯做分離。

可以在Web.config中添加下面這樣的配置。

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 >

或者在Application_Start中添加此段即可。

1  void Application_Start( object sender, EventArgs e)
2 {
3      // Enabling UnobtrusiveValidation application wide
4      ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;
5 }

而如果只想控制某個頁面開啟此功能只需加上這段代碼。

1 Page.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms;

現在我們再來看看生成到客戶端的HTML代碼的樣子。

我們發現,驗證類的信息已經變成了HTML5中的表單特有的屬性data-*

而頁面中的內聯JS等內容都已經被處理,且自動引入了jQuery進行驗證,這部分可以參考Unobtrusive JavaScript


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM