• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETMVC4中对JS和CSS的引用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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居然没有做说明,特此记录!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
关于ASP.NET与CLR相互关系的一些总结发布时间:2022-07-10
下一篇:
Asp.NETMVCajax发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap