无法在ViewComponent中加载脚本

Question

我创建了一个ViewComponent，其中显示了一个Table，它需要一些插件才能启用特定功能。在ViewComponent内部，我尝试创建一个特定部分：

@section DataTableScripts{
   <script src="~/js/JQuery/jquery.dataTables.js"></script>
} 

很遗憾，我发现ViewComponent无法加载@section。

因此，我尝试将脚本直接包含在ViewComponent中，但是问题在于脚本是在JQuery内部加载的_Layout之前加载的，具体是：

ViewComponent

<script src="~/js/JQuery/jquery.dataTables.js"></script>
<script src="~/js/JQuery/dataTables.buttons.min.js"></script>
<script src="~/js/JQuery/dataTables.keyTable.min.js"></script>
<script src="~/js/JQuery/dataTables.responsive.min.js"></script>
<script src="~/js/JQuery/dataTables.select.min.js"></script>
<script src="~/js/JQuery/dataTables.bootstrap4.js"></script>
<script src="~/js/JQuery/jquery.dataTables.js"></script>

布局

<script src="~/js/jquery.min.js"></script> 

所以在这种情况下，我会得到：

  

未定义jQuery

如何处理这种情况？

Answer 1

只需为您的ViewComponent设置Layout即可。

@{
    Layout = "/Views/Shared/_Layout.cshtml";
}


@section DataTableScripts{
    <div>It works </div>
    <script src="~/js/JQuery/jquery.dataTables.js"></script>
} 

这是有效的屏幕截图：

[编辑]

这种方法似乎不是实现此目的的好方法。如@Kirk Larkin所说，这将使Layout渲染两次。另一个补丁是编写一个新的RefinedLayout.cshtml并将Layout的{​​{1}}设置为ViewComponent：

RefinedLayout

有关更多信息，请参见workaround by MortenMeisler

Answer 2

您两次使用<script src="~/js/JQuery/jquery.dataTables.js"></script>。只需保留一次即可。

Answer 3

使用脚本为视图组件指定其他布局将重复脚本。在渲染过程中，@ section只会被忽略。 因此，我用普通的javascript domcontentloaded替换了准备好的jquery文档，并且可以在domcontentloaded内编写任何jquery。这不是永久的好方法，但对我有用。

<script>
    document.addEventListener('DOMContentLoaded', function (event) {
    console.log($ === jQuery)
});
</script>