ASP.NET MVC 5 默认模板的JS和CSS 是怎么加载的?

当创建一个默认的mvc模板后，项目如下：

运行项目后，鼠标右键查看源码，在源码里看到头部和尾部都有js和css文件被引用，他们是怎么被添加进来的呢？

首先我们先看对应的view文件index.cshtml，发现并没有任何加载js和css文件的标识。

这个时候我们就想到了，会不会是布局模板里加载了呢，因为index.cshtml页面是引用了模板的，这里的模板引用机制是，通过_ViewStart.cshtml文件来设置的。当index.cshtml没有任何设置模板页的时候，就默认把_ViewStart.cshtml文件引用的模板作为自己的模板，这么做的好处是如果非常多的页面需要模板，就不需要在每个页面都引用了，只要在_ViewStart.cshtml页面配置一次就够了，如果有不需要模板页的页面那又该这么办呢？直接在具体页面写：@{ layout = null }就可以了，我们来看看 _ViewStart.cshtml 文件的内部代码：

原来它是用Shared目录下的_Layout.cshtml模板文件，我们再来看看 _Layout.cshtml 里是什么内容：

可以看出，这个模板页面是用过C#代码方法来加载js和css ：@Styles.Render(""); @Script.Render("");

那这2个方法是怎么通过字[符串参数]加载外部js和css文件的呢？

通过摸索发现在App_Start/BundleConfig.cs 文件中发现了这个[字符串参数]的踪迹，我们来看看这个文件里的内容：

从中可以看出，最重要的一段代码为

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

可以很容易明白它的意思。相当于这个字符串 "~/bundles/jquery" 就是等于这个js文件 ~/Scripts/jquery-{version}.js ，大括号里的是版本变量，因为js库是会被升级的，会变动的。

到了这里我们应该知道是怎么一回事了，就是通过这个文件给[字符串参数] 赋值，而值就是具体的js和css文件具体目录位置。

最后一个问题，它们是什么时候加载的呢？

从什么这个截图，我们就明白，原来程序一启动就被加载了，起作用的代码是：

BundleConfig.RegisterBundles(BundleTable.Bundles);

意思是说，程序一启动，调用BundleConfig.cs 类文件的类方法 RegisterBundles(BundleCollection bundles)来加载这些js和css文件。

从这里可以看出，如果我们自己要加一些全局js和css ，就可以把代码添加到 BundleConfig.cs 文件里，类似这样的代码：

单文件：bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

多文件：
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));

还可以用通配符 * 等，请参考默认生成的文件就能明白了。

总结：

ASP.NET MVC 默认模板js和css的引用路径为：index.cshtml -> _ViewStart.cshtml -> _Layout.cshtml -> BundleConfig.cs -> Global.asax

转载于:https://www.cnblogs.com/wanghaibin/p/5952186.html

ASP.NET MVC 5 默认模板的JS和CSS 是怎么加载的?相关推荐

Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
RequireJs按需要加载angular模块和依赖，并且用r.js压缩打包js和css文件实现加载优化（图文）。
RequireJS 是一个JavaScript模块加载器,使用RequireJS加载模块化脚本将提高代码的加载速度和质量.而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路 ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
MVC站点默认页为html页,设置ASP.NET MVC站点默认页为html页
问题由来部署了一个Asp.Net MVC的站点,其功能只是作为移动端的服务器,服务器空间里面除了CMS以外就没有其他的页面了.这对于我们来说确实是有点浪费了. 可以放点静态的啥小东西放在上面玩一玩. ...
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
Yii --EClientScript 扩展，css,js文件代码压缩合并加载
扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,c ...
BUG解决：部分JS等资源文件直接加载失败
记一次BUG解决记一次BUG解决问题描述排查及解决后续问题描述近期用户反映系统经常页面加载不全,功能按钮失效,需要多次刷新才可用,失败率极高,已经影响了用户的使用,我们在本地使用却没有任何 ...
three.js的demo例子-STL加载对象组件
three.js的demo例子-STL加载对象组件提示:demo示例中所涉及到的three.js安装插件方法这里就不单个说明了哈,有需要的网上有很多教程文章目录 three.js的demo例子-S ...
SSM 实训笔记 -10- 使用 sessionStorage 存储数据、js 图片验证码、登录加载动画
SSM 实训笔记 -10- 使用 sessionStorage 存储数据.js 图片验证码.登录加载动画本篇内容: (1)在登录成功时,使用 sessionStorage 存储用户的用户名,并在登录 ...

ASP.NET MVC 5 默认模板的JS和CSS 是怎么加载的?

ASP.NET MVC 5 默认模板的JS和CSS 是怎么加载的?相关推荐

最新文章

热门文章