ASP.NET Web Forms 4.5的新特性（一）：強類型數據控件和Bundling

在微軟線上發布了Visual Studio 2012后，我們也能清晰地看到ASP.NET Web Forms 4.5中的一些新特性了。

今天先看兩個新特性：強類型數據控件和Bundling。

強類型數據控件

在出現強類型數據控件前，我們綁定數據控件時，前台一般使用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請求數”這一條了。