ASP.NET MVC下Bundle的使用方法

2024-09-27 08:02:46

ASP.NET MVC中Bundle是用于打包捆绑资源的（一般是css和js），它是在全局文件Global.asax.cs中注册Bundle，而注册的具体实现默认是在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); 在应用程序启用时注册Bundle

public class BundleConfig
{
 // 有关绑定的详细信息，请访问 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*"));

  // 使用要用于开发和学习的 Modernizr 的开发版本。然后，当你做好
  // 生产准备时，请使用 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，参数是在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>

浏览页面，查看源代码，可以看到：

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="#">关于我们</a></li>
     <li role="presentation"><a href="#">联系我们</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>© 2017 Zhong.</p>
  </footer>

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

前台浏览看效果（当浏览器足够大时是横向平铺的，如果将浏览器缩小，则是垂直平铺，示例中的表单部分最能体现出来）：

改进

上面的Bundle是引入了未压缩的css和js资源，但在实际应用中，出于为了减轻服务器负载等原因，需要引入压缩版的资源(一般是在未压缩的命名后面加上min来命名，如jquery.js的压缩版【有些叫法是精简版】是jquery.min.js)
于是修改BundleConfig.cs

重新编译，再次浏览刚才的页面，这时发现引入了压缩版的资源(css/js)

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

在页面查看源代码时发现脚本缺少引入~/Scripts/bootstrap.min.js，这是asp.net mvc 4使用的System.Web.Optimization.dll默认使用了忽略规则*.min.js，这时可以在BundleConfig.cs的RegisterBundles中清除忽略规则

该解决方法一是通过反编译System.Web.Optimization.dll并结合反编译的代码得出来的，另外也可以参考这个链接

另外就是在部署生产环境时发现无效，因为生产环境不再是debug模式，此时需要设置：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

ASP.NET MVC中使用Bundle打包压缩js和css的方法

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B
ASP.NET MVC Bundles 用法和说明（打包javascript和css）

在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以ASP.NET MVC4引入了Bundles特性,使得我们可以方便的管理javascript和css文件. 原来,我们引用css和javascript文件我们需要这样一个一个的引用: 复制代码代码如下: <scriptsrc="~/Scripts/jquery-1.8.2.js">
基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍

很高兴,最近项目用到了Asp.Net MVC4 + Entity Framework5,发现mvc4加入了Bundle.Web API等技术,着实让我兴奋,以前是用第三方的,这里主要说说Bundle技术. 很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧用上了你会发现他的好处: 将多个请求捆绑为一个请求,减少服务器请求数没有使用Bundle技术,debug下看到的是实际的请求数与路径使用Bundle技术,并且拥有缓存功能调试设置为Release模式并按F5或修改web
使用asp.net MVC4中的Bundle遇到的问题及解决办法分享

背景之前有过使用MVC3的经验,也建过MVC4的基本样例看过,知道有bundle这么一个方法. 近日想建个网站使用MVC4,但是我觉得在基本样例上改不好,有太多无用的东西,所以就建了一个空白的MVC的程序,然后自己写需要的东西, 将程序的目标框架从4.5降到了4.0(我使用的是VS2013),问题就来了. 问题及解决办法 1.降了目标框架之后,vs报一个警告:NuGet程序包是使用不同于当前目标框架的目标框架安装的,需要更新System.Web.Http,之前有用过NuGet, 但是只是
Asp.net MVC下使用Bundle合并、压缩js与css文件详解

前言介绍本文的正式内容之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件.但是可能相对较少的人才会知道,你的浏览器在同一个域名下并发加载的资源数量是有限的,例如IE 6和IE 7是两个,IE 8是6个,chrome各版本不大一样,一般是4-6个.Bundle是ASP.NET 4.5中的一个新特性,可用来将js和css进行压缩(多个文件可以打包成一个文件,也可以说是合并多
ASP.NET MVC下Bundle的使用方法

ASP.NET MVC中Bundle是用于打包捆绑资源的(一般是css和js),它是在全局文件Global.asax.cs中注册Bundle,而注册的具体实现默认是在App_Start文件夹的BundleConfig.cs中 public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); Filt
asp.net MVC下使用rest的方法

前言最近做了下个MVC的项目,需要用到rest接口,与java写的应用程序通信,包括数据的接收和发送,那么我将用实用的角度来全面的讲解一下它的使用方法一.创建rest服务首先创建一个Asp.Net Web应用程序(我这里用的是Visual Studio 2013,它已经内置了Web API2). 在出来的模板中选择Empty(空项目),并勾选WebAPI.点击确定后,就创建了一个空的WebAPI服务. 此时只有一个空项目,还没有任何功能,在进行下一步之前,首先我们来看一下REST的基本操作
Asp.net MVC定义短网址的方法

在MVC的逻辑代码里,Controller和Action是必须的,但是在网址里,并不需要完全体现Controller和Action.比如我们经常希望看到http://localhost/About而不是http://localhost/Home/About. 默认的路由规则新建MVC应用程序后,Global.asax里默认注册的路由规则是: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRout
ASP.NET MVC下的四种验证编程方式[续篇]

在<ASP.NET MVC的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注ValidationAttribute特性"."让数据类型实现IValidatableObject或者IDataErrorInfo"),那么在ASP.NET MVC框架内部是如何提供针对这四种不同编程方式的支持的呢?接下来我们就来聊聊这背后的故事. 一.ModelValidator与ModelVali
ASP.NET MVC下拉框中显示枚举项

本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框:1.通过控制器返回List<SelectListItem>类型给前台视图2.通过为枚举类型属性打上UIHint属性让模版显示枚举项3.通过自定义元数据提供器DataAnnotationsModelMetadataProvider让模版显示枚举项我们经常会把类型为Int16的属性通过枚举来获得.比如: public class SomeClass { public int16 Status{get;set;} } 对应的枚举: publi
ASP.NET MVC使用jQuery的Load方法加载静态页面及注意事项

使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; set; } public string Url { get; set; } } 在HomeController中的Index方法,向视图传递一个Article强类型. public class HomeController : Controller { public ActionResult Ind
ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了---- Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp
详解Asp.Net MVC的Bundle捆绑

大多数浏览器会对同一域名的请求限制请求数量,一般是在8个以内.每次最多可以同时请求8个,要是资源多于8个,那么剩下的就要排队等待请求了.所以为了提高首次加载页面的速度.提高请求并发请求数量,降低请求次数就是一个很重要的点. Bundle Asp.Net MVC4和.NET Framework4.5提供了支持捆绑和压缩的新类库System.Web.Optimization. 该类库提供了如下特性: 捆绑-将多个资源文件(javascript,css)合并成一个单独的文件,但是合并成的单独文件必须是
ASP.NET MVC下基于异常处理的完整解决方案总结

EntLib的异常处理应用块(Exception Handling Application Block)是一个不错的异常处理框架,它使我们可以采用配置的方式来定义异常处理策略.而ASP.NET MVC是一个极具可扩展开发框架,在这篇文章中我将通过它的扩展实现与EntLib的集成,并提供一个完整的解决异常处理解决方案. 一.基本异常处理策略我们首先来讨论我们的解决方案具体采用的异常处理策略: 对于执行Controller的某个Action方法抛出的异常,我们会按照指定配置策略进行处理.我们可以采

ASP.NET MVC下Bundle的使用方法

相关推荐

随机推荐