js,css引用顺序设定
遇到的困难
在ASP .NET MVC里面,会使用_Layout.cshtml来绘制一些全局的公共页面,以及引用相关的css和js
而在每个独立的页面中,也有自己独立的js
一般来说,希望公共的js放在独立的js之前
css同理
作法
方案1
使用@RenderSection-@section XXX的方法
在_Layout.cshtml里定义一个放置@section里面内容的地方,再在独立页面中使用@section XXX放置相关引用
保证XXX名字相同,则加载的时候,会放置到_Layout.cshtml的对应位置
下面例子中定义了"Styles"和"Scripts"两个section,展示了"Scripts"的使用
_Layout.cshtml
<!DOCTYPE html>
<html>
<head id="Head1">
<title>
</title>
<link href="~/css/common/style.css" rel="stylesheet" type="text/css">
<link href="~/lib/kkpager/kkpager_orange.css" rel="stylesheet" type="text/css">
<link href="~/lib/swiper/dist/css/swiper.min.css" rel="stylesheet" type="text/css">
<link href="~/lib/layer/theme/default/layer.css" rel="stylesheet" type="text/css">
@RenderSection("Styles", required: false)
</head>
<body>
@RenderBody()
<script type="text/javascript" src="~/js/common/jquery.js"></script>
<script type="text/javascript" src="~/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="~/lib/kkpager/kkpager.min.js"></script>
<script type="text/javascript" src="~/lib/swiper/dist/js/swiper.min.js"></script>
<script type="text/javascript" src="~/lib/layer/layer.js"></script>
<script type="text/javascript" src="~/js/common/common.js"></script>
<script type="text/javascript" src="~/js/common/jquery.jslides.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
独立页面中,这样写
@section Scripts
{
<!--这里的内容会放置在@RenderSection("Scripts", required: false)的位置-->
<script type="text/javascript" src="~/js/news/index.js"></script>
}
方案2(不推荐)
把公共的js放在Head里面,像这样
<!DOCTYPE html>
<html>
<head id="Head1">
<title>
</title>
<link href="~/css/common/style.css" rel="stylesheet" type="text/css">
<link href="~/lib/kkpager/kkpager_orange.css" rel="stylesheet" type="text/css">
<link href="~/lib/swiper/dist/css/swiper.min.css" rel="stylesheet" type="text/css">
<link href="~/lib/layer/theme/default/layer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="~/js/common/jquery.js"></script>
<script type="text/javascript" src="~/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="~/lib/kkpager/kkpager.min.js"></script>
<script type="text/javascript" src="~/lib/swiper/dist/js/swiper.min.js"></script>
<script type="text/javascript" src="~/lib/layer/layer.js"></script>
<script type="text/javascript" src="~/js/common/common.js"></script>
<script type="text/javascript" src="~/js/common/jquery.jslides.js"></script>
@RenderSection("Styles", required: false)
</head>
<body>
@RenderBody()
@RenderSection("Scripts", required: false)
</body>
</html>
js,css引用顺序设定的更多相关文章
- JS的引用顺序真的灰常重要
JS的引用一定要记得顺序,不然常常会被小小的问题卡住很久.
- js的引用顺序
注意:Bootstrap中的JS插件依赖于JQuery,因此JQuery要在Bootstrap之前引用!!! 把JS文件引用放入body的最下面,是为了使js在网页全部加载完后才起作用,比如你的js里 ...
- .Net MVC4笔记之js css引用与压缩
1.引用时,可以用即可以直接使用“~”来表示根目录. 引入js 引入js 引入css <link href="~/Content/uploadify/uploadify.css&quo ...
- ASP.Net MVC(4) 之js css引用与压缩
资源引用 可以用即可以直接使用“~”来表示根目录. 引入js <script src="~/Areas/OrderManage/JS/Form.js"></scr ...
- 网站项目所有js css无法引用问题解决方案
网站页面中的所有js css引用失效,路径确保正确,但是浏览器就是报找不到引用.仔细查找发现问题所在: 报错信息很详细了,就是.NET Framework 版本不同导致.同时也提供了两个解决方案:将. ...
- springMVC下jsp引用外部js,css等静态资源的解决方法
直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...
- webpack下css/js/html引用图片的正确方式
在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助r ...
- extentreports 测试报告引用extend.js/css失败
测试工程引用extentreports 生成的测试报告,因为报告中的js和css网络不通,所以页面乱码 解决思路: 下载需要的js.css放到测试工程的static目录下 下载extentreport ...
- JS引用另外JS文件的顺序问题。
1.在a.js中可以引用b.js文件,这样就可以在网页中只引用a.js文件,从而可以使用a.js和b.js文件中的所有方法. 引用格式如下:document.write('<script typ ...
随机推荐
- Windows Phone 8.1 应用间共享
(1)LaunchUriAsync 将简单数据包含在 Uri 中,然后发送到目标应用: await Launcher.LaunchUriAsync(new Uri("target:messa ...
- 使用DOT语言和Graphviz绘图(翻译)
Casa Taloyum About Me Blog Archives 使用DOT语言和Graphviz绘图(翻译) Date Wed 26 November 2014 Tags graphviz / ...
- 【t049】&&【u001】足球
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 我们当中有很多热爱中国足球的同学,我们都知道中超(中国足球超级联赛)的规则: 一场比赛中,若获胜(即你 ...
- js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)
js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...
- 【z06】观光公交
描述 风景迷人的小城Y市,拥有n个美丽的景点.由于慕名而来的游客越来越多,Y市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第0分钟出现在1号景点,随后依次前往2.3.4--n号景 ...
- Qt 静态函数QMetaObject::connectSlotsByName(QObject * object)
看别人代码看到void on_MyWidget_slotTest(); 就郁闷了,没看到他代码里有connect 却能把信号和槽可以连接起来. 今日回顾书本发现该函所的nb之处. QMetaObjec ...
- vi/vim基本使用命令
vi/vim基本使用命令 一.总结 一句话总结:1.记住三种模式:命令行模式.插入模式.底行模式:2.记住两个按键功能:i和esc 二.vi/vim基本使用命令 vi/vim 基本使用方法本文介绍了v ...
- Python将被加入高考科目?你怎么看?
今天看到这样的一则新闻:不禁感叹,人工智能这股风来的太快,已经掀起全民学习Python的浪潮. 2017年中观察:看上去这个大纲内容基本是这样了,但是实行年份可能要往后推了,不在2017年执行了(据说 ...
- web项目的WEB-INF目录
WEB-INF是Java的WEB应用的安全目录.所谓安全就是客户端无法访问,只有服务端可以访问的目录. 如果想在页面中直接访问其中的文件,必须通过web.xml文件对要访问的文件进行相应映射才能访问. ...
- Oracle数据库零散知识06 -- Package的定义与简单触发器
CREATE OR REPLACE PACKAGE pak_02 IS--包头 --这里可定义公共参数 FUNCTION fun_01 RETURN NUMBER; PROCEDURE pro_01 ...