遇到的困难

在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 >
    <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 >
    <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>

相关文章:

  • 2021-08-18
  • 2021-06-25
  • 2022-12-23
  • 2021-09-20
  • 2021-08-16
  • 2021-11-23
  • 2022-01-28
  • 2021-06-11
猜你喜欢
  • 2022-12-23
  • 2021-12-10
  • 2021-12-20
  • 2022-12-23
  • 2021-11-20
  • 2022-12-23
相关资源
相似解决方案