指令碼和樣式包

以下是 BundleConfig.cs 檔案的預設程式碼段。

using System.Web.Optimization;

public class BundleConfig  
{  
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725  
    public static void RegisterBundles(BundleCollection bundles)  
    {  
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
                    "~/Scripts/jquery-{version}.js"));  
                    
    // Use the development version of Modernizr to develop with and learn from. Then, when you're  
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.  
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(  
                "~/Scripts/modernizr-*"));  

    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(  
                "~/Content/themes/base/jquery.ui.core.css",  
                "~/Content/themes/base/jquery.ui.resizable.css",  
    }  
 } 

Bundle 在 Application_Start() 方法內的 Global.asax 檔案中註冊：

using System.Web.Optimization;

protected void Application_Start() 
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

繫結包應該在你的檢視中呈現為：

@using System.Web.Optimization

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

請注意，當你處於開發模式（Web.config 檔案中的編譯元素設定為 debug =true）時，不會發生繫結。相反，檢視中的 Render 語句將以非繫結的非縮小格式包含每個單獨的檔案，以便於除錯。

一旦應用程式處於生產模式（Web.config 檔案中的編譯元素設定為 debug =false），將進行繫結。

這可能導致引用其他檔案的相對路徑的指令碼的複雜性，例如對 Twitter Bootstrap 的圖示檔案的引用。這可以通過使用 System.Web.Optimization 的 CssRewriteUrlTransform 類來解決：

 bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

CssRewriteUrlTransform 類將繫結檔案中的相對 Urls 重寫為絕對路徑，以便在將呼叫引用移動到 bundle 的位置後引用將保持不變（例如，使用上面的程式碼，從“〜/ Content / css /”移動 bootstrap.cssto〜/ bundles / css / bootstrap.css“）。