ASP.NET MVC Bundles 用法和说明(打包javascript和css)
作者:tuohaibei 发布时间:2023-07-17 01:20:59
在网页中,我们经常需要引用大量的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")
猜你喜欢
- 但是Class这个东西,如果用得比较少,充其量只是一个大模块的包装方式. 只有大规模地用它来开发,才能显出它对项目管理的优越性来. 所谓的意
- 使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascri
- 1.嵌入 IFrame(/assets/img/anchor.svg)]()](https://gradio.app/sharing-you
- 今天,由于工作需要,我在自己的电脑上配置了Mysql5环境,同时安装了一个phpMyAdmin管理工具,安装完成后,发现在phpMyAdmi
- 将表数据生成SQL脚本的存储过程示例:CREATE PROCEDURE dbo.UspOutputData @tablename sysna
- VBSCRIPT中的日期,时间,星期函数很丰富,给我们使用带来了很大的方便,我个人使用最多的就是用now()来获取服务器的当前日期和时间。但
- 根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- 我想把本篇作为css基础教程的序曲,从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分,单独发表,其间可能会插
- Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用。我们
- 如何用拦截表单的方法上传图片? 看下列代码:<script language="
- access中可以将文本中的数据轻松导入表中,mysql中用起来没那么方便,其实起来也很简单。首先将数据记录按行处理好用特定的字符分开如:“
- 下面这段代码,你知道有哪些错误吗:var g_bar = "bar";function foo(container, c
- 当你连接一个MySQL服务器时,你通常应该使用一个口令。口令不以明文在连接上传输。所有其它信息作为能被任何人读懂的文本被传输。如果你担心这个
- 验证关键词是否为sql保留字的在线工具:<html> <head><t
- SQL Server Extended Events(下面简称XEvent)是SQL Server 2008里新加的事件处理系统,用来取代S
- 什么是Canvas<canvas> 是一个新的 HTML 元素,这个元素在 HTML5&
- 1. 简介本文将介绍 Go 语言中的 sync.Cond 并发原语,包括 sync.Cond的基本使用方法、实现原理、使用注意事项以及常见的
- 模块化分页1.查询语句块<% 取得当前文件名 temp = Split(request.ServerV
- Pygame的mixer 模块可以依据命令播放一个或多个声音,并且也可以将这些声音混合在一起。而获得声音需要四个步骤:一、启动mixer进程
- 在数据库应用的设计中,我们往往会需要获取某些表的记录总数,用于判断表的记录总数是否过大,是否需要备份数据等。我们通常的做法是:select