跟我一起學習ASP.NET 4.5 MVC4.0（六）

這一系列文章跨度有點大，由於最近忙於其他事情，沒有更新，今天重新安裝了下Win8系統，VS2012和SQLServer 2012，順便抽空繼續一篇。隨著VS2012 RC版本的放出，ASP.NET MVC4.0也隨之有所改變，主要相對於BETA版本。前面幾章節都是介紹MVC4.0或者是3.0中內容，今天我們來瞭解一下WebPage 2.0下面的一些變化。在MVC3.0中使用的是WebPage 1.0版本，這裡主要是介紹一下在MVC4.0中對指令碼以及樣式表的引用變化等等。

 

一、可以直接使用“~”，而無需使用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還有很多值得我們去挖掘，由於我不是一個專業的學術研究者，寫的文章不夠有條理，思路都是想到那些到哪，沒有時間來規範這個從易到難或什麼的來書寫，給各位帶來不好的瀏覽效果表示歉意。