时间戳

首页 > 解决方案 > 如何为特定视图加载特定脚本和 css？

c# - 如何为特定视图加载特定脚本和 css？

问题描述

假设我有一个名为 的视图Login.cshtml，我需要加载这些视图：

<link href="~/css/particle.css" rel="stylesheet" />
<script src="~/js/particle-js/particles.min.js"></script>
<script src="~/js/particle-js/app.js"></script>

在我的应用程序中，我还_Layout.cshtml包含要为每个页面加载的基本脚本。如何在用户访问Login.cshtml视图时加载上面的脚本和 css，如发生在_Layout.cshtml？

我学到的是存在@section，但我不知道这样做是否最好，有人可以建议我如何正确地做到这一点？

提前致谢。

标签： c#asp.net-mvcasp.net-core

解决方案

部分似乎是这个用例的合适解决方案。

因此，您将RenderSection在布局 cshtml 文件中使用该方法。例如，如果您想head在文档的部分中包含一些静态资源，您将在布局的 head 元素中创建一个新部分

<head>
      @RenderSection("PageCss",required:false)
</head>
<body>
    <div>
       @RenderBody()
       @RenderSection("scripts", required: false)
    </div>
</body>

在您的视图（Login.cshtml）中，您将通过此特定部分添加静态资源。

@section PageCss
{
   <link href="~/css/particle.css" rel="stylesheet" />
   <script src="~/js/particle-js/particles.min.js"></script>
   <script src="~/js/particle-js/app.js"></script>    
}
@section PageCss
{
   <script src="~/js/anotherSciptWhichDoesNotBlockRendering.js"></script>
}

当 razor 执行代码时，它将呈现正确的 html。

您可以创建多个部分并根据需要使用它。

考虑适当地使用脚本标签上的asyncanddefer属性来防止呈现阻塞脚本下载/执行行为。

推荐阅读