Question

假设我有一个名为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时（如在_Layout.cshtml中一样，如何在上面加载脚本和CSS？

我了解到@section的存在，但是我不是最好的做法，有人会建议我如何正确地做到这一点吗？

谢谢。

Answer 1

该部分似乎是此用例的合适解决方案。

因此，您将在布局cshtml文件中使用RenderSection方法。例如，如果您想在文档的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>
}

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

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

请考虑在脚本标签上适当使用async和defer属性，以防止渲染阻止脚本下载/执行行为。

如何为特定的视图加载特定的脚本和CSS？

1 个答案: