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"></script>
<scriptsrc="~/Scripts/jquery-ui-1.8.24.js"></script>
<scriptsrc="~/Scripts/jquery.validate.js"></script>
<linkhref="~/Content/Site.css"rel="stylesheet"/>

当需要引用文件的数量较少时还好，但一旦每个页面都需要引用较多文件时，会造成极大的不便，当我们想更换某个引用文件时，将会浪费大量的时间。发布时，还要将一些库替换成release版，比如上面的jquery-1.8.2.js所对应的jquery-1.8.2.min.js

还好，现在我们可以使用Bundles特性：

代码如下:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery")
        .Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryui")
        .Include("~/Scripts/jquery-ui-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryval")
        .Include("~/Scripts/jquery.unobtrusive*"
        ,"~/Scripts/jquery.validate*"));
        bundles.Add(new StyleBundle("~/Content/css")
        .Include("~/Content/site.css"));
    }
}

接着在Global.asax文件的Application_Start方法中调用BundleConfig.RegisterBundles方法:

代码如下:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    WebApiConfig.Register(GlobalConfiguration.Configuration);
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

在上面我们可以看到我们按照功能的不同，将不同的文件分到了相应的Bundle(Bundle就是包的意思)，其中构造函数中的string参数是Bundle的名称，Include函数是将参数相应的文件包含成一个Bundle。可以发现，对于jquery库我们使用了这样的名称~/Scripts/jquery-{version}.js，其中{version}部分代表版本号的意思，MVC将会替我们在Scripts文件中寻找对应的"jquery-版本号.js"文件，并且在非debug模式下，MVC则会使用“jquery-版本号.min.js"文件。

我们还看到我们使用了这样的名称~/Scripts/jquery.validate*的名称，*是一个通配符，这就意味着Scripts文件夹下的所有前缀为jquery.validate的文件都将包含在同一个Bundle中。

最后，我们可以View上使用Bundle来代替原来引用的方式:

代码如下:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")

赞 (0)

相关推荐

  • ASP.NET MVC下Bundle的使用方法

    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 MVC4中的Bundle遇到的问题及解决办法分享

    使用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的方法

    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下使用Bundle合并、压缩js与css文件详解

    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 MVC4 Bundle捆绑压缩技术的介绍

    基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍

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

  • 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">

  • 学习使用grunt来打包JavaScript和CSS程序的教程

    学习使用grunt来打包JavaScript和CSS程序的教程

    Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理.在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建工具已经成为可能. Grunt.js是基于Node.js的自动化任务运行器.Grunt.js结合NPM的包依赖管理,完全可以媲美Maven.Grunt.js天然适合前端应用程序的构建--不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建.越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQu

  • ASP.NET MVC 4 捆绑和缩小实例介绍

    ASP.NET MVC 4 捆绑和缩小实例介绍

    在 ASP.NET MVC 4 中可捆绑多个 css 和 js 文件以减少HTTP请求,并对 css 和 js 文件进行压缩(缩小),这样可提高网站的加载速度.我们选取博客园的 css 文件来看看,在 ASP.NET MVC 4 前,我们引入 css 方法如下: 复制代码 代码如下: <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <link

  • ASP.NET MVC 使用Bootstrap的方法

    ASP.NET MVC 使用Bootstrap的方法

    作为一名Web开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的.特别是对于Windows Form的开发者而言,更是难上加难. 正是由于这样的原因,Bootstrap诞生了.Twitter Bootstrap为开发者提供了丰富的CSS样式.组件.插件.响应式布局等.同时微软已经完全集成在ASP.NET MVC 模板中. Bootstrap结构介绍 你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap. 解压文件夹

  • ASP.NET MVC页面重定向简单介绍

    在asp.net中页面重定向:Server.Execute("m2.aspx"); 服务器保存此页转向前的数据后,使页面转向到m2.aspx执行, 再返回本页继续执行.再将三者结果合并后返回给浏览器. 以上都是服务器端页面转向所以浏览器不出现页更改记录(显示的地址不会改变).因此,如果用户刷新此页,也许会出现一些其它意外情况. 此类页转向,可完成一些其它功能,比如访问到前一页面中的服务端控件. 一.Response.Redirect: 当浏览器请求aspx页面时,碰到Redirect(

  • ASP.NET MVC 数据验证及相关内容

    ASP.NET MVC 数据验证及相关内容

    一.数据验证 数据验证的步骤在模型类中添加与验证相关的特性标记在客户端导入与验证相关的js文件和css文件使用与验证相关的Html辅助方法在服务器端判断是否通过服务器端验证常用的验证标记 Required:非空验证StringLength:验证字符串的长度RegularExpression:正则表达式验证Compare:比较两个字段的值是否相等Range:范围验证Remote:服务器验证(需要在controller中编写返回值为JsonResult的Action)自定义验证标记与验证相关的js文

  • ASP.NET MVC使用Ajax的辅助的解决方法

    ASP.NET MVC使用Ajax的辅助的解决方法

    前言:前面我们已经简单的介绍过了MVC如何Jquery,因为我们如果使用Ajax的话必须要了解Jquery,这篇博客我们将大致了解一下ASP.NET MVC如何使用Ajax的辅助方法,此博客是我的读书笔记,如果那里写的不好,还请各位朋友提出来,我们共同学习.1．准备工作 (1)在MVC刚开始学习的时候,我们就需要介绍ASP.NET MVC框架中的HTML的辅助方法,但是这类文章现在已经很多了,而且个人感觉很简单,所以没有写笔记,我在这里就不介绍了. (2)ASP.NET MVC框架中的HTML辅

随机推荐