ASP.NET Web Forms 4.5的新特性


作者:Parry
出處:http://www.cnblogs.com/parry/

 

一、強類型數據控件

在出現強類型數據控件前,我們綁定數據控件時,前台一般使用Eval或者DataBinder.Eval(Container.DataItem,"FieldName")的形式。

1 <%# DataBinder.Eval(Container.DataItem, " FieldName ") %>
2 <%# Eval( " FieldName ") %>

而在ASP.NET Web Forms 4.5中出現了強類型數據控件,可以后台綁定數據的控件多了個屬性:ItemType

當指定了控件的ItemType后就可以在前台使用強類型綁定數據了。

指定ItemType。

使用強類型綁定數據。

屆時園子里估計又要掀起一番爭論ORM的風潮 :)

 

二、Bundling

不怎么好翻譯,類似於資源文件的壓縮包,索性不翻譯它了。

我們知道Web性能優化的一個主要的方法就是減少HTTP請求,詳細可見YSlow里面的Minimize HTTP Requests

由此才出現了css sprite、壓縮CSS/JS的工具,目的都是為了盡量減少HTTP的請求。

之前.NET框架下會有很多的第三方框架,微軟也出過一個Microsoft Ajax Minifier,我也曾經也過一篇文章介紹過。

而這次在ASP.NET Web Forms 4.5中,索性直接添加了此功能,多了一個叫做Bundle的類。

 1  public  class BundleConfig
 2     {
 3          //  For more information on Bundling, visit  http://go.microsoft.com/fwlink/?LinkId=254726
 4          public  static  void RegisterBundles(BundleCollection bundles)
 5         {
 6             bundles.Add( new ScriptBundle( " ~/bundles/WebFormsJs ").Include(
 7                    " ~/Scripts/WebForms/WebForms.js ",
 8                    " ~/Scripts/WebForms/WebUIValidation.js ",
 9                    " ~/Scripts/WebForms/MenuStandards.js ",
10                    " ~/Scripts/WebForms/Focus.js ",
11                    " ~/Scripts/WebForms/GridView.js ",
12                    " ~/Scripts/WebForms/DetailsView.js ",
13                    " ~/Scripts/WebForms/TreeView.js ",
14                    " ~/Scripts/WebForms/WebParts.js "));
15 
16             bundles.Add( new ScriptBundle( " ~/bundles/jquery ").Include(
17                      " ~/Scripts/jquery-{version}.js "));
18 
19             bundles.Add( new ScriptBundle( " ~/bundles/MsAjaxJs ").Include(
20                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjax.js ",
21                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js ",
22                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js ",
23                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js "));
24 
25             bundles.Add( new StyleBundle( " ~/Content/themes/base/css ").Include(
26                    " ~/Content/themes/base/jquery.ui.core.css ",
27                    " ~/Content/themes/base/jquery.ui.resizable.css ",
28                    " ~/Content/themes/base/jquery.ui.selectable.css ",
29                    " ~/Content/themes/base/jquery.ui.accordion.css ",
30                    " ~/Content/themes/base/jquery.ui.autocomplete.css ",
31                    " ~/Content/themes/base/jquery.ui.button.css ",
32                    " ~/Content/themes/base/jquery.ui.dialog.css ",
33                    " ~/Content/themes/base/jquery.ui.slider.css ",
34                    " ~/Content/themes/base/jquery.ui.tabs.css ",
35                    " ~/Content/themes/base/jquery.ui.datepicker.css ",
36                    " ~/Content/themes/base/jquery.ui.progressbar.css ",
37                    " ~/Content/themes/base/jquery.ui.theme.css "));
38         }
39     }

Bundle還支持將CSS壓縮的文件配置寫在config文件里,使得維護更加方便,同時也支持CDN和文件通配符等。

可以通過在Application_Start里注冊配置。

1  void Application_Start( object sender, EventArgs e)
2 {
3     BundleConfig.RegisterBundles(BundleTable.Bundles);
4 }

使用。

1  <% : Scripts.Render( " ~/bundles/modernizr " %>
2  <% : Scripts.Render( " ~/bundles/jquery " %>
3  <% : Scripts.Render( " ~/bundles/jqueryui " %>

壓縮前后請求數對比(圖片來源)。

壓縮合並前。

壓縮后。

這樣,當此屬性成為了ASP.NET自帶的一個功能后,我們只需要很簡單地配置就可以實現優化准則里面的“減少掉HTTP請求數”這一條了。

 

三、針對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

 

五、Model Binding

如果用過ObjectDataSource控件,肯定對其SelectMethod有印象,在ASP.NET Web Forms 4.5中,微軟直接將此方法移到了強類型控件上。

將之前DataBind方法直接替換成了更方便的SelectMethod方法,具體參見這里

SelectMethod方法接受IEnumerable或者IQueryable類型的對象,如果使用了前面介紹的ItemType屬性后,就需要接受IEnumerable<T>或者IQueryable<T>類型的對象,T與前面的ItemType一致。

如我們這樣設置一個GridView的配置。

 

 1  < form  id ="form1"  runat ="server" >
 2      < div >
 3          < asp:GridView  ID ="GridView_Users"  runat ="server"  ItemType ="ModelBinding.Users"
 4              DataKeyNames ="UserID"  SelectMethod ="GetUsers"
 5              AutoGenerateColumns ="False" >
 6              < Columns >
 7                  < asp:BoundField  DataField ="UserID"  HeaderText ="User ID"   />
 8                  < asp:BoundField  DataField ="UserName"  HeaderText ="User Name"   />
 9                  < asp:BoundField  DataField ="UserEmail"  HeaderText ="Email"   />
10              </ Columns >
11          </ asp:GridView >
12          < asp:ValidationSummary  ID ="ValidationSummary_UserEdit"  runat ="server"  ShowModelStateErrors ="true"   />
13      </ div >
14  </ form >

后台綁定數據。

1  public IQueryable<Users> GetUsers()
2 {
3     List<Users> list =  new List<Users>();
4     list.Add( new Users() { UserID =  1, UserName =  " Parry ", UserEmail =  " Parry@cnblogs.com " });
5     list.Add( new Users() { UserID =  2, UserName =  " Spiderman ", UserEmail =  " Spiderman@cnblogs.com " });
6     list.Add( new Users() { UserID =  3, UserName =  " Superman ", UserEmail =  " PaSupermanrry@cnblogs.com " });
7     list.Add( new Users() { UserID =  4, UserName =  " Batman ", UserEmail =  " Batman@cnblogs.com " });
8      return list.AsQueryable<Users>();
9 }

頁面顯示。

當然,控件還支持UpdateMethod和DeleteMethod分別進行修改和刪除操作。

需要注意的是,在后台定義的SelectMethod中也是可以定義參數屬性的。

public IQueryable<Users> GetUsers([Control] int? userID)

還支持Form、QueryString、Cookies、Url這些屬性。

整體感覺這部分是ASP.NET Web Forms 4.5變化較大,也是更像MVC的地方。微軟將EF,強類型控件,Model Binding串聯起來,定義了一個規整的后台綁定的方法和流程。

更詳細的介紹可以參考ScottGu的系列文章:Web Forms Model Binding


免責聲明!

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



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