遇到的困難
在ASP .NET MVC里面,會使用_Layout.cshtml來繪制一些全局的公共頁面需忿,以及引用相關(guān)的css和js
而在每個獨立的頁面中诅炉,也有自己獨立的js
一般來說,希望公共的js放在獨立的js之前
css同理
作法
方案1
使用@RenderSection-@section XXX的方法
在_Layout.cshtml里定義一個放置@section里面內(nèi)容的地方屋厘,再在獨立頁面中使用@section XXX放置相關(guān)引用
保證XXX名字相同涕烧,則加載的時候,會放置到_Layout.cshtml的對應(yīng)位置
下面例子中定義了"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
{
<!--這里的內(nèi)容會放置在@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>