第四章 在MVC4.0中對腳本以及樣式表的引用變化

原文：http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html

一、可以直接使用“~”，而無需使用Href對象實例

這個是一大變化，給我們ASP.NET MVC開發人員帶來了很便捷的代碼書寫方式，提高不少效率。在MVC3.0中加入我們需要加入一張圖片時，需要在IMG標簽的SRC屬性加上 Url.Content或Href對象方法等來對路徑進行解析。在WebPage 2.0中Razor模板引擎能夠自動解析基於根目錄的路徑，即可以直接使用“~”來表示根目錄。

 MVC3：

<a href="@Href("~/Default.cshtml")">Home</a> 

MVC4：

 

< a  href ="~/Default.cshtml" >Home </ a >

 

 

二、CheckBox等可以根據Value自動隱藏checked屬性

 在以前初始化一個CheckBox是否被選中，都需要額外寫一個方法來判斷是否在INPUT的CheckBox中加入checked屬性。在MVC4.0中這個將被改變，這也是一個很贊的改進，具體可以看如下代碼。

MVC3：

 1 <input type="checkbox"

 
          2  
          name 
          ="check1" 
          
 
          3  
          value 
          ="check1" 
          
 
          4  
          @if(checked1){<text 
          >checked="@checked1" 
          </ 
          text 
          >} /> 
         

MVC4：

 1 <input type="checkbox"

 
          2  
          name 
          ="check1" 
          
 
          3  
          value 
          ="check1" 
          
 
          4  
          checked 
          ="@checked1" 
            
          /> 
         

 只要checked1變量為false或null，將會隱藏checked屬性，是不是一個很好的改進！！

 

三、使用System.Web.Optimization對腳本和樣式表的操作

這個也是本章重點向描述的部分，首先我們可以使用VS2012RC來新建一個MVC4.0項目，版本可以為4.0或4.5。在 Global.asax文件代碼中，我們發現已經把過濾器，路由器，以及對樣式表和腳本捆綁（Bundles）移到了其他頁面，就是在根目錄下的 App_Start文件夾內。代碼只是簡簡單單的幾行，代碼如下：

 
           1  
          using System; 
          
 
           2  
          using System.Collections.Generic; 
          
 
           3  
          using System.Configuration; 
          
 
           4  
          using System.Data.Entity; 
          
 
           5  
          using System.Data.Entity.Infrastructure; 
          
 
           6  
          using System.Linq; 
          
 
           7  
          using System.Web; 
          
 
           8  
          using System.Web.Http; 
          
 
           9  
          using System.Web.Mvc; 
          
 
          10  
          using System.Web.Optimization; 
          
 
          11  
          using System.Web.Routing; 
          
 
          12  
          
 
          13  
          namespace MVC4 
          
 
          14 { 
          
 
          15      
          // 
           Note: For instructions on enabling IIS6 or IIS7 classic mode, 
 
          16  
               
          // 
           visit  
          http://go.microsoft.com/?LinkId=9394801 
          
 
          17  
          
 
          18      
          public  
          class MvcApplication : System.Web.HttpApplication 
          
 
          19     { 
          
 
          20          
          protected  
          void Application_Start() 
          
 
          21         { 
          
 
          22             AreaRegistration.RegisterAllAreas(); 
          
 
          23  
          
 
          24             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 
          
 
          25             RouteConfig.RegisterRoutes(RouteTable.Routes); 
          
 
          26             BundleConfig.RegisterBundles(BundleTable.Bundles); 
          
 
          27         } 
          
 
          28     } 
          
 
          29 } 
         

而在App_Start目錄下多了3個文件，他們分別是RilterConfig.cs，RouteConfig.cs以及 BundleConfig.cs文件。在BETA版本中還是直接寫在Global.asax文件中，從名稱上就可以知道他們各自的功能，今天我們主要了解 BundleConfig.cs文件的內容和功用。

 

在BundleConfig.cs文件中，包含了一些應用程序中使用的腳本和樣式表的文件路徑，其中可以使用通配符，具體代碼如下所示：

 
           1  
          using System.Web; 
          
 
           2  
          using System.Web.Optimization; 
          
 
           3  
          
 
           4  
          namespace MVC4 
          
 
           5 { 
          
 
           6      
          public  
          class BundleConfig 
          
 
           7     { 
          
 
           8          
          public  
          static  
          void RegisterBundles(BundleCollection bundles) 
          
 
           9         { 
          
 
          10             bundles.Add( 
          new ScriptBundle( 
          " 
          ~/bundles/jquery 
          ").Include( 
          
 
          11                          
          " 
          ~/Scripts/jquery-1.* 
          ")); 
          
 
          12  
          
 
          13             bundles.Add( 
          new ScriptBundle( 
          " 
          ~/bundles/jqueryui 
          ").Include( 
          
 
          14                          
          " 
          ~/Scripts/jquery-ui* 
          ")); 
          
 
          15  
          
 
          16             bundles.Add( 
          new ScriptBundle( 
          " 
          ~/bundles/jqueryval 
          ").Include( 
          
 
          17                          
          " 
          ~/Scripts/jquery.unobtrusive* 
          ", 
          
 
          18                          
          " 
          ~/Scripts/jquery.validate* 
          ")); 
          
 
          19  
          
 
          20             bundles.Add( 
          new ScriptBundle( 
          " 
          ~/bundles/modernizr 
          ").Include( 
          
 
          21                          
          " 
          ~/Scripts/modernizr-* 
          ")); 
          
 
          22  
          
 
          23             bundles.Add( 
          new StyleBundle( 
          " 
          ~/Content/css 
          ").Include( 
          " 
          ~/Content/site.css 
          ")); 
          
 
          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     } 
          
 
          40 } 
         

這些都是關於Bundle的應用，從代碼中就可以看到，Bundle實例對象（Script和Style）中包含一個虛擬目錄，這個目錄可以在頁面 中使用時作為唯一鍵引入。當然在實現優化時，這個虛擬目錄將呈現在前台頁面中，這個后面將繼續講述。下面我們來看一下在代碼中如何使用他們，在 System.Web.Optimization程序集中包含了Scripts和Styles兩個類，分別用於呈現Bundle集合中的腳本和樣式表，代 碼如下：

 
          1         @Styles.Render( 
          " 
          ~/Content/themes/base/css 
          ",  
          " 
          ~/Content/css 
          ") 
          
 
          2         @Scripts.Render( 
          " 
          ~/bundles/modernizr 
          ") 
         

從上面就可以看出，往頁面中引入了兩個捆綁的樣式表和一個腳本，這些引入是包含了所有Include方法內的文件，調試一下看看前台HTML代碼就知道了。而他們中的另一個方法Url則是對外部文件的引入，例如CDN中的文件，如：Google等等API文件。

 

四：對樣式表和腳本的優化

這項其實也是包含在三中的，我獨立出來，最主要感覺是我覺得他是個不錯的家伙。代碼簡單，但是非常的適用，不知道大家有沒有使用過 AjaxMinify這個東東，可以把腳本編譯，壓縮成最小的內容。不過都是要使用命令的，然而在MVC4.0中 System.Web.Optimization已經包含了這個東東，他們就是JsMinify和CssMinify，不要小看這兩個類，雖然公開的方法 就兩個。

按照上述方法是用Scripts和Styles將腳本和樣式表引入頁面時，無需修改任何代碼就可以將腳本和樣式表編譯壓縮輸入到客戶端，這樣不僅可 以有效的增加JSHack的難度以及降低文件的大小。為了達到這個目的，我們只需要將BundleTable中的一個屬性設置為true即可，代碼如下：

 
           1  
          using System; 
          
 
           2  
          using System.Collections.Generic; 
          
 
           3  
          using System.Configuration; 
          
 
           4  
          using System.Data.Entity; 
          
 
           5  
          using System.Data.Entity.Infrastructure; 
          
 
           6  
          using System.Linq; 
          
 
           7  
          using System.Web; 
          
 
           8  
          using System.Web.Http; 
          
 
           9  
          using System.Web.Mvc; 
          
 
          10  
          using System.Web.Optimization; 
          
 
          11  
          using System.Web.Routing; 
          
 
          12  
          
 
          13  
          namespace MVC4 
          
 
          14 { 
          
 
          15      
          // 
           Note: For instructions on enabling IIS6 or IIS7 classic mode, 
 
          16  
               
          // 
           visit  
          http://go.microsoft.com/?LinkId=9394801 
          
 
          17  
          
 
          18      
          public  
          class MvcApplication : System.Web.HttpApplication 
          
 
          19     { 
          
 
          20          
          protected  
          void Application_Start() 
          
 
          21         { 
          
 
          22             AreaRegistration.RegisterAllAreas(); 
          
 
          23              
          
 
          24             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 
          
 
          25             RouteConfig.RegisterRoutes(RouteTable.Routes); 
          
 
          26             BundleTable.EnableOptimizations = true; 
          
 
          27             BundleConfig.RegisterBundles(BundleTable.Bundles); 
          
 
          28         } 
          
 
          29     } 
          
 
          30 } 
         

是不是很神奇啊，上面紅色字體的就是我們要加入的一行代碼。關於ASP.NET 4.5 MVC 4.0還有很多值得我們去挖掘，由於我不是一個專業的學術研究者，寫的文章不夠有條理，思路都是想到那些到哪，沒有時間來規范這個從易到難或什么的來書 寫，給各位帶來不好的瀏覽效果表示歉意。