https://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" />

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

  1. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  2. ASP.NET MVC4中的bundles特性引发服务器拒绝访问(403错误)

    在ASP.NET MVC4中微软引入了bundles特性,这个特性可以将服务器端的多个Javascript或多个css文件捆绑在一起作为一个单一的URL地址供客户端浏览器调用,从而减少了页面上Http ...

  3. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  4. ASP.NET MVC4中的App_start中BundleConfig的介绍使用

    在BundleConfig.cs中,指定CSS和JS,主要用来压缩JS和CSS   在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压 ...

  5. WebSocket在ASP.NET MVC4中的简单实现

    WebSocket在ASP.NET MVC4中的简单实现 2013-12-21 20:48 by 小白哥哥, 810 阅读, 3 评论, 收藏, 编辑 WebSocket 规范的目标是在浏览器中实现和 ...

  6. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  7. Django中载入js和css文件

    Django中载入js和css文件 项目的文件夹结构例如以下: mysite |-mysite |-|-static |-|---js和css文件 |-|-|-init.py |-| |-models ...

  8. Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四)

    上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有两个User标题,或者我们想自己在gii生成时添加或删除些公用的东西.这就需要我们定义自己的gii模板. 我们以CRUD的模板为例,默认的gi ...

  9. ASP.NET MVC4中使用NHibernate

    ASP.NET MVC4中使用NHibernate 1:下载安装NHibernate 打开 VS 2012新建一个 MVC4项目. 在项目名称上右击选择Manage NuGet Packages.你会 ...

随机推荐

  1. 【Java】基于RXTX的Java串口通信

    本篇内容参考转载自https://blog.csdn.net/kong_gu_you_lan/article/details/80589859 环境搭建 下载地址:http://fizzed.com/ ...

  2. css常用样式背景background如何使用

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

  3. Spring AOP-基于@AspectJ风格

    关于Spring AOP,可以去看看官方文档: https://docs.spring.io/spring-framework/docs/current/spring-framework-refere ...

  4. 安装Jenkins到Ubuntu(APT)

    运行环境 系统版本:Ubuntu 16.04.4 LTS 软件版本:Jenkins-2.176.2 硬件要求:最低内存:256MB.磁盘:1GB 安装过程 1.配置APT-Jenkins存储库 APT ...

  5. linux下定时网站文件备份和数据备份以及删除旧备份标准代码

    直切正题: 文件备份:web.sh 数据备份:db.sh 删除旧备份:clear.sh vi web.sh文件内容为: #!/bin/bash        解释:shell脚本标准头 cd  网站文 ...

  6. Qt中MySQL数据库的操作例程

    数据库连接不成功时,要将libmysql.dll放到C:\Qt\Qt5.11.0\5.11.0\mingw53_32\bin和C:\Qt\Qt5.11.0\5.11.0\msvc2017_64\bin ...

  7. Navicat Premium15安装与激活(破解)

    Navicat premium是一款数据库管理工具,是一个可多重连线资料库的管理工具,它可以让你以单一程式同时连线到 MySQL.SQLite.Oracle 及 PostgreSQL 资料库,让管理不 ...

  8. MySQL 8 批处理模式

    shell> mysql -h host -u user -p < batch-file 强制执行脚本,即使某些语句参数错误,可以添加 --force 参数 如果MySQL运行在Windo ...

  9. JS Radio结合TEXT

    <script> function fun_a(value){ if(value === "on"){ document.getElementById('a').dis ...

  10. GSS 系列题解

    GSS GSS1 随便猫树或者线段树,就可以过了 猫树不说,线段树可以维护左边最大,右边最大,区间最大,区间值然后就做出来了. //Isaunoya #pragma GCC optimize(2) # ...