ASP.NET MVC下Bundle的使用方法

更新時(shí)間：2017年08月22日 10:01:09 作者：zhjchhahaha

這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC下Bundle的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

ASP.NET MVC中Bundle是用于打包捆綁資源的（一般是css和js），它是在全局文件Global.asax.cs中注冊(cè)Bundle，而注冊(cè)的具體實(shí)現(xiàn)默認(rèn)是在App_Start文件夾的BundleConfig.cs中

public class MvcApplication : System.Web.HttpApplication
{
 protected void Application_Start()
 {
  AreaRegistration.RegisterAllAreas();
  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
 }
}

BundleConfig.RegisterBundles(BundleTable.Bundles); 在應(yīng)用程序啟用時(shí)注冊(cè)Bundle

public class BundleConfig
{
 // 有關(guān)綁定的詳細(xì)信息，請(qǐng)?jiān)L問(wèn) http://go.microsoft.com/fwlink/?LinkId=301862
 public static void RegisterBundles(BundleCollection bundles)
 {
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
     "~/Scripts/jquery-{version}.js"));

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
     "~/Scripts/jquery.validate*"));

  // 使用要用于開(kāi)發(fā)和學(xué)習(xí)的 Modernizr 的開(kāi)發(fā)版本。然后，當(dāng)你做好
  // 生產(chǎn)準(zhǔn)備時(shí)，請(qǐng)使用 http://modernizr.com 上的生成工具來(lái)僅選擇所需的測(cè)試。
  bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
     "~/Scripts/modernizr-*"));

  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
     "~/Scripts/bootstrap.js",
     "~/Scripts/respond.js"));

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

為了便于說(shuō)明，這里在HomeController下新建一個(gè)Action，如下：

public ActionResult BundleTest()
{
 return View();
}

這里以使用Bootstrap為例，在視圖中使用@Styles.Render() 和@Scripts.Render() 引入css和js，參數(shù)是在BundleConfig注冊(cè)的名稱(chēng)

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>BundleTest</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 
 @Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")
</body>
</html>

瀏覽頁(yè)面，查看源代碼，可以看到：

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

由于在BundleConfig.cs中注冊(cè)上面的Bundle，@Styles.Render("~/Content/css")渲染時(shí)是引入~/Content/bootstrap.css和~/Content/site.css，js的渲染同理
為了驗(yàn)證是否真正引入了BootStrap的css與js資源，這里添加了一些簡(jiǎn)單的BootStrap示例代碼，如下：

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>BundleTest</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <div class="container">
  <div class="header clearfix">
   <nav>
    <ul class="nav nav-pills pull-right">
     <li role="presentation" class="active"><a href="#">首頁(yè)</a></li>
     <li role="presentation"><a href="#">關(guān)于我們</a></li>
     <li role="presentation"><a href="#">聯(lián)系我們</a></li>
    </ul>
   </nav>
  </div>
  <form class="form-horizontal">
   <div class="form-group">
    <label for="username" class="col-sm-2 control-label">用戶(hù)名</label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="username" placeholder="用戶(hù)名">
    </div>
   </div>
   <div class="form-group">
    <label for="password" class="col-sm-2 control-label">密碼</label>
    <div class="col-sm-10">
     <input type="password" class="form-control" id="password" placeholder="密碼">
    </div>
   </div>
   <div class="form-group">
    <label for="code" class="col-sm-2 control-label">驗(yàn)證碼</label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="code" placeholder="驗(yàn)證碼">
    </div>
   </div>
   <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
     <div class="checkbox">
      <label>
       <input type="checkbox"> 記住我
      </label>
     </div>
    </div>
   </div>
   <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
     <button type="submit" class="btn btn-default">登錄</button>
    </div>
   </div>
  </form>
  <footer class="footer">
   <p>&copy; 2017 Zhong.</p>
  </footer>

 </div> <!-- /container -->
 @Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")
</body>
</html>

前臺(tái)瀏覽看效果（當(dāng)瀏覽器足夠大時(shí)是橫向平鋪的，如果將瀏覽器縮小，則是垂直平鋪，示例中的表單部分最能體現(xiàn)出來(lái)）：

改進(jìn)

上面的Bundle是引入了未壓縮的css和js資源，但在實(shí)際應(yīng)用中，出于為了減輕服務(wù)器負(fù)載等原因，需要引入壓縮版的資源(一般是在未壓縮的命名后面加上min來(lái)命名，如jquery.js的壓縮版【有些叫法是精簡(jiǎn)版】是jquery.min.js)
于是修改BundleConfig.cs

重新編譯，再次瀏覽剛才的頁(yè)面，這時(shí)發(fā)現(xiàn)引入了壓縮版的資源(css/js)

注：由于示例時(shí)使用了ASP.NET MVC 5( .Net Framework 4.5)，而在.net framework 4中的asp.net mvc 4可能會(huì)有下面的情況：

在頁(yè)面查看源代碼時(shí)發(fā)現(xiàn)腳本缺少引入~/Scripts/bootstrap.min.js，這是asp.net mvc 4使用的System.Web.Optimization.dll默認(rèn)使用了忽略規(guī)則*.min.js，這時(shí)可以在BundleConfig.cs的RegisterBundles中清除忽略規(guī)則