Bundle如何在ASP.NETMVC中使用-創(chuàng)新互聯(lián)

本篇文章為大家展示了Bundle如何在ASP.NET MVC中使用，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

衡水ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

ASP.NET MVC中Bundle是用于打包捆綁資源的（一般是css和js），它是在全局文件Global.asax.cs中注冊Bundle，而注冊的具體實現(xià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)用程序啟用時注冊Bundle

public class BundleConfig
{
 // 有關(guā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*"));

  // 使用要用于開發(fā)和學習的 Modernizr 的開發(fā)版本。然后，當你做好
  // 生產(chǎn)準備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
  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"));
 }
}

為了便于說明，這里在HomeController下新建一個Action，如下：

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

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

@{
 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>

瀏覽頁面，查看源代碼，可以看到：

Bundle如何在ASP.NET MVC中使用

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

由于在BundleConfig.cs中注冊上面的Bundle，@Styles.Render("~/Content/css")渲染時是引入~/Content/bootstrap.css和~/Content/site.css，js的渲染同理
為了驗證是否真正引入了BootStrap的css與js資源，這里添加了一些簡單的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="#">首頁</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">用戶名</label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="username" placeholder="用戶名">
    </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">驗證碼</label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="code" placeholder="驗證碼">
    </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>

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

Bundle如何在ASP.NET MVC中使用

改進

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

Bundle如何在ASP.NET MVC中使用

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

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

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

Bundle如何在ASP.NET MVC中使用

該解決方法一是通過反編譯System.Web.Optimization.dll并結(jié)合反編譯的代碼得出來的，另外也可以參考這個鏈接

另外就是在部署生產(chǎn)環(huán)境時發(fā)現(xiàn)無效，因為生產(chǎn)環(huán)境不再是debug模式，此時需要設(shè)置：

Bundle如何在ASP.NET MVC中使用

上述內(nèi)容就是Bundle如何在ASP.NET MVC中使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：Bundle如何在ASP.NETMVC中使用-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://jinyejixie.com/article2/csoeic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、建站公司、云服務(wù)器、面包屑導航、企業(yè)建站、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

Bundle如何在ASP.NETMVC中使用-創(chuàng)新互聯(lián)