当创建一个默认的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

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

  1. 常用js,css文件统一加载方法,并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  2. [Asp.net MVC]Bundle合并,压缩js、css文件

    摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...

  3. JS js与css的动态加载

    http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html

  4. 前端页面JS和CSS以及图片加载nginx报错:net::ERR_CONTENT_LENGTH_MISMATCH的解决与检查

    首先检查nginx权限 具体可参考地址https://www.cnblogs.com/hooly/p/9951748.html 或者百度其他方法 还有种情况,之前是可以用的,突然出现这种加载报错的情况 ...

  5. ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler

    ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

  6. Django 04 模板标签(if、for、url、with、autoeacape、模板继承于引用、静态文件加载)

    Django 04 模板标签(if.for.url.with.autoeacape.模板继承于引用.静态文件加载) 一.if.for.url.with.autoescape urlpatterns = ...

  7. mvc中多参数URL会很长,首次加载不传参数让url很短,路由规则实现方法[bubuko.com]

    如要实现列表中地址全路径“bubuko-11-2.html”,在首次进入时,使用短路径“bubuko.html”,只有再次href后才显示全路径“bubuko-11-2.html”,下面使用路由规则来 ...

  8. js判断flash文件是否加载完毕

    轮询判断加载进度 img的加载完成有onload方法,一直不知道该怎么判断swf文件是否加载完毕了? 在应用中使用了轮询判断加载进度值PercentLoaded是否达到100,经测试,可以达到效果. ...

  9. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

随机推荐

  1. 用C/C++实现对STORM的执行信息查看和控制

    近期公司有个需求.须要在后端应用server上实时获取STORM集群的执行信息和topology相关的提交和控制,经过几天对STORM UI和CMD源代码的分析,得出能够通过其thrift接口调用实现 ...

  2. Tomcat 安全配置与性能优化

    一.Tomcat内存优化 1.JAVA_OPTS参数说明 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 JAVA_OP ...

  3. [aaronyang]WPF4.5 - AyTabControlBase样式分享,绝对好看

    样式代码如下: 对于博客园将文章移除首页的做法:我就迁移了.文章已经迁移:http://www.ayjs.net/post/75.html 由于例子比较简单,你只要指定Style即可,难点,透明区域的 ...

  4. Kernel Function--核函数收集

    转自 http://www.zhizhihu.com/html/y2010/2292.html Kernel Functions Below is a list of some kernel func ...

  5. 解决Maven关于本地jar包的打包处理

    在使用maven进行jar包管理时,通过我们都是通过maven去下载一些jar包,但有些jar在maven上没有,所以就就可能在本地直接手动加入一些需要用到的外部jar包.但如果我们用maven pa ...

  6. 中国的 Android:尚未发掘的应用市场?

    作者: Wendy Boswell 本周,中国的搜索引擎公司百度最新公布的一篇报告介绍了中国 Android 用户的移动趋势. 下面是一些有价值的统计数据: 眼下在中国,每天的 Android 活跃用 ...

  7. [转载] A set of top Computer Science blogs

    This started out as a list of top Computer Science blogs, but it more closely resembles a set: the o ...

  8. Android学习笔记----解决“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536”问题

    同时在工程中引入了多个第三方jar包,导致调用的方法数超过了android设定的65536个(DEX 64K problem),进而导致dex无法生成,也就无法生成APK文件. 解决办法如下: 1.谷 ...

  9. 申请Payoneer美国万事达信用卡,可获得一个美国虚拟银行账户,立即注册可得25美元

    申请Payoneer美国万事达信用卡,可获得一个美国虚拟银行账户,可以在国内任意一个支持万事达的ATM.POS机上取现和刷卡消费.Payoneer可以网上购物,购买国外的产品,对我们有一个好处就是利用 ...

  10. Swift: 深入理解Core Animation(一)

    如果想在底层做一些改变,想实现一些特别的动画,这时除了学习Core Animation之外,别无选择. 最近在看<iOS Core Animation:Advanced Techniques&g ...