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

时间: 2024-10-10 12:47:48

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

可编辑路由—Asp.NET MVC项目编译后,修改路由配置可动态加载

Asp.NET MVC 应用程序一旦完成部署到线上后,就不能够修改路由配置,只有重新编译应用程序,重新部署到程序集才能够完成,最近在学习过程中看到了一篇博客关于如何更改路由选项后,能够直接运行到已部署的应用程序中. 首先看看我在程序中,解决方案的结构选项,方便学习,,Route文件夹中放的是这次需要的类文件和接口,在控制器中我定义了一个HomeController 在里面定义了Index和Modify两个方法,也在Views文件夹中定义了相应的视图用于测试使用. 1,定义一个IRouteRegi

javascript实现js脚本的的异步加载

javascript实现js脚本的的异步加载,和图片的异步加载稍有不同,script的异步加载需要借助dom,因此有了局限性 <html> <head> <meta charset="utf-8" /> <title>Javascript</title> <meta http-equiv="X-UA-Compatible" content="IE=7"> </head&

nginx设置反向代理后,页面上的js css文件无法加载

问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:js css文件可以正常加载: 解决方法: nginx配置文件中,增加如下配置: location ~ .*\.(js|css)$ { proxy_pass http://127.0.0.1:8866; } 原因分析: 反向代理的路径下找不到文件,需要单独指定js css文件的访问路径.

js引入php 用来加载静态页面 输出到页面中

HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd"></script> js.php代码: <?php //js加载静态页面 输出到页面中 $id = trim($_GET['id']); $file = 'iframe/'.$id.'.html'; if(file_exists($file)){ //echo '22'; $

Js外部资源按需加载

内容来源:http://hi.baidu.com/begin/item/df02bd79ca8cc0710d0a078a 按需加载js的研究和实现 加载js的基本原理,就是在DOM里面加载<script>元素,加载这些元素都是异步的过程.所以可以说是无阻塞的加载.但是如果脚本之间存在依赖的话,就会出现不可预知的错误.根据这个,在加载脚本的时候,需要监听"load"事件,对于IE的特殊性,需要监听"readystatechange"事件.基于这些,实现两个

js和jquery页面初始化加载函数的方法及先后顺序

原文:js和jquery页面初始化加载函数的方法及先后顺序 运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <!DOCTYPE html> <html> <head> <title>首页</title> <script type="text/javascript" src=&quo

JS如何实现文档加载完成后再去执行代码

JS如何实现文档加载完成后再去执行代码:在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title&g

ASP.NET MVC 替换默认的基架模板

在学习Asp.net Mvc中,今天第一次听了基架,哈哈! 常用的首字母缩略词 CRUD 恰当地传达了根据数据存储编写例程创建.检索.更新和删除操作的普通任务.Microsoft 提供由 T4 模板强力驱动的实用基架引擎,可为使用实体框架的 ASP.NET MVC 应用程序中的模型自动创建基本的 CRUD 控制器和视图(目前也可使用不带实体框架基架的 WebAPI 和 MVC). 基架生成可导航和使用的页面.总而言之,它们减少了您在构建 CRUD 页面时需要执行的单调工作.不过,基架生成的结果提

【MVC】ASP.NET MVC 4项目模板的结构简介

引言     在VS2012新建一个窗体验证的MVC 4项目后,可以看到微软已经帮我们做了很多了,项目里面该有的都有了,完全可以看成一个简单网站.作为开发,能理解里面文件结构和作用,也算是半只脚踏进MVC的大门了.下面依次介绍其中的文件作用. App_Start AuthConfig.cs AuthConfig类的RegisterAuth用来注册外部登录,具体作用在于用户可以用外部的账号登录本网站. BundleConfig.cs BundleConfig类的RegisterBundles可以将