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

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

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

ASP.NET MVC中Bundle是用于打包捆綁資源的（一般是css和js），它是在全局文件Global.asax.cs中注冊(cè)Bundle，而注冊(cè)的具體實(shí)現(xiàn)默認(rèn)是在A(yíng)pp_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è)面，查看源代碼，可以看到：

Bundle如何在A(yíng)SP.NET MVC中使用

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)）：

Bundle如何在A(yíng)SP.NET MVC中使用

改進(jìn)

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

Bundle如何在A(yíng)SP.NET MVC中使用

重新編譯，再次瀏覽剛才的頁(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ī)則

Bundle如何在A(yíng)SP.NET MVC中使用

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

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

Bundle如何在A(yíng)SP.NET MVC中使用

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

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

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

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

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

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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