標籤: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"/>
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 = "[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的新特性