Question

我需要先加载JQuery，然后在_Layout内创建以下代码：

<!DOCTYPE html>
<html>

<body class="sidebar-enable" data-keep-enlarged="true">
    <div class="wrapper">
        @RenderBody()
    </div>

    <script src="~/js/jquery.min.js"></script>
    @RenderSection("DataTableScript", required: false)
</body>
</html>

我有一个名为ViewComponent的{{1}}，我以这种方式将其加载到名为ProductsViewComponent的{{1}}内：

View

在Home内，我需要加载@await Component.InvokeAsync("Products", new { date = "2018-09-05" })（这需要JQuery才能正常工作），因此我在ViewComponent（这是{{1的html） }}）：

DataTableScript

我指定了另一个Default.cshtml，因为ProductsViewComponent无法呈现部分（有关更多信息，请参见this问题）

在@{ Layout = "/Views/Shared/_LayoutViewComponent.cshtml"; } @section DataTableScript{ <script src="~/js/vendor/jquery.dataTables.js"></script> <script src="~/js/vendor/dataTables.bootstrap4.js"></script> <script src="~/js/vendor/dataTables.responsive.min.js"></script> <script src="~/js/vendor/responsive.bootstrap4.min.js"></script> <script src="~/js/vendor/dataTables.buttons.min.js"></script> <script src="~/js/vendor/buttons.bootstrap4.min.js"></script> <script src="~/js/vendor/buttons.html5.min.js"></script> <script src="~/js/vendor/buttons.print.min.js"></script> <script src="~/js/vendor/dataTables.keyTable.min.js"></script> <script src="~/js/vendor/dataTables.select.min.js"></script> <script src="~/js/dataTable.js"></script> }里面，我放置了以下代码：

Layout

基本上ViewComponent调用_LayoutViewComponent，然后加载@RenderBody() @RenderSection("DataTableScript")。但是，当我启动应用程序时，我在RenderBody之前加载了_Layout，这确实很奇怪，因为在DataTableScript中，我指定在{{1}之后加载DataTableScript }。

Answer 1

您可以使用局部代码来呈现脚本标签。

视图/共享/_DataTableScriptsPartial.cshtml

('a', 1)

在您的<script src="~/js/vendor/jquery.dataTables.js"></script> <script src="~/js/vendor/dataTables.bootstrap4.js"></script> <script src="~/js/vendor/dataTables.responsive.min.js"></script> <script src="~/js/vendor/responsive.bootstrap4.min.js"></script> <script src="~/js/vendor/dataTables.buttons.min.js"></script> <script src="~/js/vendor/buttons.bootstrap4.min.js"></script> <script src="~/js/vendor/buttons.html5.min.js"></script> <script src="~/js/vendor/buttons.print.min.js"></script> <script src="~/js/vendor/dataTables.keyTable.min.js"></script> <script src="~/js/vendor/dataTables.select.min.js"></script> <script src="~/js/dataTable.js"></script>中声明一个_Layout.cshtml部分。

scripts

在使用ViewComponent的页面中，在脚本部分中呈现部分视图。

Products.cshtml

<!DOCTYPE html>
<html>
<head>
    @RenderSection("head", required: false)
</head>
<body class="sidebar-enable" data-keep-enlarged="true">
    <div class="wrapper">
        @RenderBody()
    </div>
    <script src="~/js/jquery.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 2

您不能为视图组件视图指定布局。本质上是局部视图。在处理视图组件时，主布局已经固定。您应该使用脚本加载库有条件地包含其他脚本，然后外部化用于服务视图组件的JavaScript，并在关联脚本完成加载后运行它。

您可以使用多种不同的库/技术：CommonJS，AMD，RequireJS等。您需要进行一些研究，找出最适合您的库/技术。但是，这是一个变革性的事情。它将改变您使用应用程序处理脚本的整个方式，结果可能需要对现有的所有内容进行一些重大的重组。

更简单的方法是仅将脚本包含在主布局中。如果您的布局包含此视图组件，那么无论如何总会需要脚本，因此只需使其静态即可。它没有想要的视图组件成为完全独立的功能单元的热烈毛刺，但要实现这一目标，可能需要付出更多的努力，而这是对此特定组件应有的或合理的。场景。

对于它的价值，您可以通过使用<link rel="preload" href="..." as="script" />标签预先加载脚本来进行一些优化。这会在您的脑海中浮现，并提示支持的浏览器继续运行并加载脚本，而无需实际运行它（这是阻止渲染的部分）。然后，等到您在关闭body标记之前实际包含脚本时，可能已经很不错了，脚本标记只会提示浏览器运行它。

更新

另一种选择是使用支持“组件”的客户端库。这将替代视图组件，而不是您要添加的其他组件。但是，客户端组件的好处在于，您可以包含其中的所有JavaScript功能，然后该库仅在最后运行您的文档并将所有内容连接起来。我个人喜欢Vue，但是还有其他选择，例如React，Ember，Angular等。请查阅每个文档，以评估您是否更喜欢这种方法以及更喜欢哪个特定的库。他们基本上都做相同的事情，但是他们都有各自独特的到达目的地的方式。

我个人喜欢Vue，因为它重量轻且在很大程度上不引人注目。它不一定会迫使您以某种方式做事，因此您可以在这方面拥有更多的自由。像React和Angular这样的库往往更固执己见，并且由于它们更倾向于创建单页应用程序，因此有时可能难以通过服务器端渲染（例如Razor视图）来划分职责。不过只是我的意见。

无法在其他脚本之前加载jQuery

2 个答案: