MVC中Bundle的使用

最後更新：2018-08-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：enable def ted fas link hid scss gis open

1、BundleConfig配置

(1)StyleBundle中的參數，即為cshtml中需要調用的虛擬路徑名稱。

(2)Include包含路徑，可以包含一個或多個css或js檔案。即包含一組檔案。

    public class BundleConfig    {        public static void RegisterBundles(BundleCollection bundles)        {            //bundles.Add(new ScriptBundle("~/bundles/common").Include(            //      "~/Scripts/common.js"));            bundles.Add(new ScriptBundle("~/bundles/home").Include(                       "~/Scripts/home.js"));            //easyui            bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/default/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/default/easyui.css"));            bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/gray/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/gray/easyui.css"));            bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/easyui.css"));            bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/tree.css"));            // 使用 Modernizr 的開發版本進行開發和瞭解資訊。然後，當你做好            // 生產準備時，請使用 http://modernizr.com 上的產生工具來僅選擇所需的測試。            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(                        "~/Scripts/modernizr-*"));            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Site.css"));        }    }

View Code

一個Bundle包含多個檔案樣本：

2、Global.asax配置

    public class MvcApplication : System.Web.HttpApplication    {        protected void Application_Start()        {            AreaRegistration.RegisterAllAreas();            RouteConfig.RegisterRoutes(RouteTable.Routes);            //啟用jscss壓縮            BundleTable.EnableOptimizations = true;            BundleConfig.RegisterBundles(BundleTable.Bundles);                    }    }

View Code

第一步，啟用jscss壓縮。

第二步，載入Bundle配置。

3、cshtml中的使用。

<head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <script src="~/Scripts/jquery-easyui-1.5.5.7/jquery.min.js"></script>    <script src="~/Scripts/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script>    @Styles.Render("~/Content/css")    @Styles.Render("~/Scripts/jquery-easyui-1.5.5.7/themes/default/css")    @Scripts.Render("~/bundles/home")</head>

4、產生的頁面代碼

<head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <script src="/Scripts/jquery-easyui-1.5.5.7/jquery.min.js"></script>    <script src="/Scripts/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script>    <link href="/Content/css?v=mpciHVE84rPIWYZzgLErA-nBXPONYU0Sn0Is2YbG6Ng1" rel="stylesheet"/>    <link href="/Scripts/jquery-easyui-1.5.5.7/themes/default/css?v=84FaSCtYfIH4azFlRKfYjKoxVT2uXZ5HOs4N1AVXMx01" rel="stylesheet"/>    <script src="/bundles/home?v=gDJGC1b9-5ftvwRmjbv95JsnYhDZ0xguyL0N3IwalY01"></script></head>

MVC中Bundle的使用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More