ASP.NET Web Forms 4.5的新特性

來源:互聯網
上載者:User

標籤:style   blog   http   io   os   使用   java   ar   for   

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"/>

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 = "[email protected]" });
5     list.Add(new Users() { UserID = 2, UserName = "Spiderman", UserEmail = "[email protected]" });
6     list.Add(new Users() { UserID = 3, UserName = "Superman", UserEmail = "[email protected]" });
7     list.Add(new Users() { UserID = 4, UserName = "Batman", UserEmail = "[email protected]" });
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。

ASP.NET Web Forms 4.5的新特性

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.