ASP.NET 設定jQuery Mobile的Bundle(MVC 4與Web Form均可用)

ASP.NET 4.5增加了Bundle新功能,
能夠讓我們在設計網頁時,
不需要再對於javascript與CSS檔案的改版作網頁上引用的變動





例如網站內的100張網頁要引用javascript,以往必須要加入:
 <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>

但如果改js檔案改版變成jquery.1.8.3.js.
這時候所有網頁上的標籤全部都要重新改成
 <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>

非常的不方便,

而ASP.NET 4.5的Bundle可以在引用處使用別名
 <script src="別名" type="text/javascript"></script>

在至程式中對別名註冊,指定別名對應到某特徵的檔案,
如

別名 => Scripts/jquery.1.*

如此一來,網頁在執行時就會動態的去尋找符合該特徵的js檔案作引用
以後js檔案改版後,只需要輕鬆的將script目錄中的檔案置換掉就萬事OK了
(另外  CSS檔也能夠使用)

而預設只有MVC 4的網站樣板會直接加入Bundle(Empty樣板則不會),Web Form要自己來

以下是註冊與個別引用Bundle的方式

-----------------------Bundle註冊(MVC與Web Form同)-------------------------

1.先加入System.Web.Optimization.dll參考

2.在App_Start目錄內加入BundleConfig.cs檔案

3.檔案內using System.Web.Optimization;

4.加入BundleConfig類別,並加入RegisterBundles靜態方法,方法內加入Bundle註冊程式

   1:  public class BundleConfig

   2:  {

   3:      public static void RegisterBundles(BundleCollection bundles)

   4:      {

   5:          bundles.Add(new ScriptBundle("~/bundles/jquery").

   6:              Include("~/Scripts/jquery-1.*"));

   7:   

   8:          bundles.Add(new ScriptBundle("~/bundles/jquerymobile").

   9:              Include("~/Scripts/jquery.mobile*"));

  10:   

  11:          bundles.Add(new StyleBundle("~/Content/mobilecss").

  12:              Include("~/Content/jquery.mobile*"));

  13:   

  14:      }

  15:  }

在這裡要注意 javascript要用ScriptBundle物件,而CSS用StyleBundle註冊
而上述兩類別的建構式內都是提供Bundle後的別名,
Include方法內則是指定實際位址內要Bundle的檔案特徵.

例如"~/Scripts/jquery-1.*"會搜尋 Scripts目錄下所有jquery-1.開頭的檔案來用
如jquery-1.8.2.js就會被找到

5.接著去global.asax內先using System.Web.Optimization;

6.在global.asax內的Application_Start事件處理常式加入註冊程式碼

   1:  BundleConfig.RegisterBundles(BundleTable.Bundles);

如此,註冊就完成了,再來就是在網頁上使用

-----------------------------------MVC 4使用方式-----------------------------------
1.先至Views目錄內的web.config去引用命名空間,這樣View內才能找到Bundle物件
   在 <system.web.webPages.razor> => <pages> => <namespaces> 內,
   加入:
    <add namespace="System.Web.Optimization" />

2.在View(.cshtml)內加入

   1:      @Styles.Render("~/Content/mobilecss")

   2:      @Scripts.Render("~/bundles/jquery")

   3:      @Scripts.Render("~/bundles/jquerymobile")

此三行分別使用Styles.Render去找Style Bundle , Scripts.Render去找ScriptBundle,
而方法內的參數就是上面Bundle註冊時使用的別名.


--------------------------------Web Form使用方式------------------------------------
1.先在網頁上Using System.Web.Optimization (or web.config <pages> => <namesapces>)
<%@ Import Namespace="System.Web.Optimization" %>

2.接著也是在網頁上加入引用標籤,方法內也是給別名:

   1:  <%: Styles.Render("~/Content/mobilecss") %>

   2:  <%: Scripts.Render("~/bundles/jquery") %>

   3:  <%: Scripts.Render("~/bundles/jquerymobile") %>

兩者網頁上到時候都會加入像這樣的引用標籤:

   1:  <link href="/Content/jquery.mobile-1.2.0.css" rel="stylesheet"></link>

   2:  <script src="/Scripts/jquery-1.8.2.js"></script>

   3:  <script src="/Scripts/jquery.mobile-1.2.0.js"></script>

如此就搞定了!!