ASP.NET MVC4中用 BundleCollection使用问题手记

ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"   type="text/css" />

将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径。这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量压力并没有什么改进的变化,所以推测可能出于模块化设计思想和并发方面的考虑,微软在MVC4中将这一方式做了改变:

在新建一个ASP.NETMVC4站点的时候都会在~/App_Start目录下有一个BundleConfig.cs的启动文件,当然创建其他的ASP.NET4.0及4.0以上的项目也会有。这个文件里面包含了如下代码:

 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

这段代码被放在Application_Start()中执行了:

BundleConfig.RegisterBundles(BundleTable.Bundles);

上述Add方法的含义在于将网站引用资源根据实际情况进行分组引用,然后页面部分按照如下方式来引用:

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

在运行之后会生成常规引用代码,从而达到资源引用的目的。但是这个改进远远没有看起来那么简单,我们先引用《淘宝这十年》中一段话:

生成首页后,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS、JS(JavaScript)、图片等样式、脚本和资源文件。但是可能相对较少的人才会知道,你的浏览器在同一个域名下并发加载的资源数量是有限的,例如IE 6和IE 7是两个,IE 8是6个,chrome各版本不大一样,一般是4~6个。我刚刚看了一下,我访问淘宝网首页需要加载126个资源,那么如此小的并发连接数自然会加载很久。

我们只需要将BundleTable.EnableOptimizations设置为true,MVC4就会启用压缩,将单次引用的资源文件压缩,减少请求数量和带宽,当然在开发调试时一般不开启。

那么会遇到什么问题呢?

1. 自定义的JS不一定能成功加载。

我们一般习惯于将JS和CSS放置在一个大目录中,因为有些时候他们是分不开的(项目规模大了除外),比如我是将EasyUI的目录结构原原本本的放在Content目录下,那么删除掉Scripts目录和BundleConfig.cs中无关引用,添加自己的如下:

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Content/jquery.min.js"));

bundles.Add(new ScriptBundle("~/bundles/easyui").Include(
"~/Content/jquery.easyui.min.js"));

页面中按照上面的方式引用,结果发现根本没有引用到,于是注意到MVC在设计这里的功能的时候引入了通配符,比如

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));

可以通过版本匹配,也可以通过*号匹配但是必须放在最后,没有提会忽略哪些字符串,所以导致了上述问题。

解决方案是去掉min即可。

2.css被压缩后,里面图片路径文件的问题。

样式表中Content/themes/styles.css 里图片一般都是这样写的 background:
url(img/bg.png),在启用了压缩之后路径就会改变,所以路径全部出现找不到资源的情况。

解决方案:对于独立的CSS单独分组如:

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

暂时发现这2个问题,MSDN居然没有做说明,特此记录!

ASP.NET MVC4中用 BundleCollection使用问题手记,码迷,mamicode.com

时间: 2024-08-09 06:33:57

ASP.NET MVC4中用 BundleCollection使用问题手记的相关文章

ASP.NET MVC4中用 BundleCollection

来源:http://www.cnblogs.com/madyina/p/3702314.html ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对

使用asp.net MVC4中的Bundle遇到的问题及解决办法分享

本文转自http://www.jb51.net/article/47264.htm 这篇文章主要介绍了使用asp.net MVC4中的Bundle遇到的问题及解决办法,需要的朋友可以参考下 背景    之前有过使用MVC3的经验,也建过MVC4的基本样例看过,知道有bundle这么一个方法. 近日想建个网站使用MVC4,但是我觉得在基本样例上改不好,有太多无用的东西,所以就建了一个空白的MVC的程序,然后自己写需要的东西, 将程序的目标框架从4.5降到了4.0(我使用的是VS2013),问题就来

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨 系列目录 基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可以确实的统计在线用户! Discuz!NT 在线用户功能算是做得比较好的!参考资料 他的原理大致是根据用户的操作间隔来确定用户是否在线,也可以理解为操作日志,当系统扫描的日志间隔太长将被理解为用户离线,所以要不断的更新操作表和操作表日益增长的烦恼,所以必须定时的清除操作表,当系统启动时要重置表数据!

ASP.NET MVC4入门—2、第一个MVC程序

目录 ASP.NET MVC4入门—1.ASP.Net的两种开发方式 ASP.NET MVC4入门—2.第一个MVC程序 开发环境:VS2012 .SQL Sserver2008 1.打开VS,文件——新建项目Guestbook 点击确定后,会出现如下对话框,进行模版的选择,在这里你还可以选择是否创建单元测试,为了养成一个良好的习惯,这里我勾选了“创建单元测试项目” 这时会创建两个项目:Guestbook和Guestbook.Tests,将Guestbook设置为启动项目,然后,按Ctrl-F5

Asp.Net MVC4开发三:HTML5、CSS3、JQuery、JQuery UI的应用

在Asp.Net MVC4里面UI层也就是View层默认使用HTML5以及与HTML相对应的CSS3,JS默认使用JQuery和JQuery UI.新建一个MVC4项目,项目会自动包含JQuery.JQuery UI所需要的文件及智能提示支持; HTML则是自动生成HTML5格式标签的页面. 先来看看MVC4项目里面对这些内容的支持: 在MVC4项目里面有Scripts和Content两个文件夹,Scripts里面存放Java scripts库包括JQuery, JQuery UI, JQuer

ASP.NET MVC4+BootStrap 实战(二)

上一篇文章我们讲述了页面初始加载数据的一些东西,本篇我们来讲一下查询按钮和分页按钮.在很久以前我写过一篇ASP.NET MVC4切近实战的文章,有关于分页的代码,本篇我们不采用微软的AJAX框架. 先看一下查询效果,在点击Get按钮之后,会进行AJAX请求. js代码如下 jQuery(document).ready(function () {     setRowBackColor();     $("#btnsearch").click(function () {         

无废话版本-Asp.net MVC4.0 Rasor的基本用法

最近工作有点忙,好久没写东西了!废话不多说了,进入主题! 1.在页面中输出单一变量时候,只要在C#语句之前加上@符号即可,For example: <p>Now Time:@DateTime.Now</p> 请注意,上述example中虽然使用C#语言撰写代码,但输出单一变量的时候,不需要加上分号: 2.在页面上输出一段含有空白字元或者运算子的结果时,必须在前后加上一个小括号,For example: <p> UserName:@(User.Identity.Name+

ASP.NET WebForm中用async/await实现异步出人意料的简单

1. 在.aspx中添加异步标记 <%@ Page Language="C#" Async="true"%> 2. 在.aspx.cs或者.ascx.cs(用户控件)中添加异步方法 private async Task GetMyPosts() { var posts = await ServiceFactory.BlogPostSevice.GetBlogPostsPagedAsync(); rpPosts.DataSource = posts; rp

初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序

初入码田--ASP.NET MVC4 Web应用开发之一  实现简单的登录 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查 2016-07-29 再次之前,需要一台电脑(- ̄▽ ̄)-,以及Visual Studio 2013或者更高版本,SQL Sever数据库(暂时不用) 新建项目 下面会出现选择模板选项(我们选择的是MVC模板) 其中,在创建MVC模板时会有身份验证选项.可选择添加的文件夹和核心引用(Web Form和Web API)以及单元测试选项 身份验证分