Fatal编程技术网
  • asp.net/
  • Asp.net 无法在其他脚本之前加载jquery

Asp.net 无法在其他脚本之前加载jquery

asp.net asp.net-core

Asp.net 无法在其他脚本之前加载jquery,asp.net,asp.net-core,Asp.net,Asp.net Core,我需要先加载JQuery，所以我在\u布局中创建了这段代码： <!DOCTYPE html> <html> <body class="sidebar-enable" data-keep-enlarged="true"> <div class="wrapper"> @RenderBody() </div> <script src="~/js/jquery.min.js"></s

我需要先加载
JQuery
，所以我在
\u布局中创建了这段代码：


<!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
中，我需要加载
DataTableScript
（这需要JQuery才能正常工作），因此我在
Default.cshtml
中创建了此逻辑（这是
ProductsViewComponent
的html）：


基本上，
RenderBody
调用
\u布局
，然后加载
DataTableScript
。但是当我启动应用程序时，我会在
JQuery
之前加载
DataTableScript
，这真的很奇怪，因为在
\u布局中，我指定在
JQuery
之后加载
DataTableScript
，您不能为视图组件视图指定布局。这基本上是一个局部视图。在处理视图组件时，主布局已设置为“石头”。您应该使用脚本加载库有条件地包含其他脚本，然后将为视图组件提供服务的JavaScript外部化，并在相关脚本加载完成后运行它

您可以使用各种不同的库/技术：CommonJS、AMD、RequireJS等。您需要做一些研究，找出最适合您的库/技术。然而，这是一件具有变革性的事情。它将改变应用程序处理脚本的整个方式，因此可能需要对现有的任何内容进行一些重大的重组

更简单的方法是只在主布局中包含脚本。如果您的布局包含此视图组件，那么无论如何它都需要脚本，所以请继续使其保持静态。它没有像您希望视图组件成为的完全自包含的功能单元那样的温暖模糊，但是要实现这一点，可能需要付出更多的努力，这对于这一特定场景来说是合理的

为了实现它的价值，您可以通过使用
标记预先加载脚本来优化一些内容。这将进入您的头脑，并提示支持浏览器继续并加载脚本，而不实际运行脚本（这是阻止渲染的部分）。然后，当您在结束body标记之前实际包含脚本时，很可能已经可以开始了，而脚本标记只会提示浏览器运行它

更新

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


我个人喜欢Vue，因为它重量轻，而且基本上不引人注目。它不一定强迫你以某种方式做事，所以在这方面你可以有更多的自由。React和Angular之类的库往往更加固执己见，而且由于它们更倾向于创建单页应用程序，因此有时很难使用服务器端呈现（如Razor视图）来划分职责。不过这只是我的意见。
您可以使用partial来呈现脚本标记

查看/Shared/_datatablescriptial.cshtml


<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 = "_Layout"; 
}

@await Component.InvokeAsync("Products", new { date = "2018-09-05" })

@section scripts {
    @await Html.PartialAsync("_DataTableScriptsPartial")
}


在使用ViewComponent的页面中，在“脚本”部分中呈现分部

Products.cshtml


<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 = "_Layout"; 
}

@await Component.InvokeAsync("Products", new { date = "2018-09-05" })

@section scripts {
    @await Html.PartialAsync("_DataTableScriptsPartial")
}



嗯，你猜最好的选择是使用
preload
而不是安装其他第三方libs？preload只是一个优化提示。它本身并不能替代任何东西。我唯一要说的是，如果你关心的是页面重量/呈现时间，那么有一些方法可以减轻这一点。我有15个脚本或其他，我会尝试使用预加载，这是相当多的脚本。现代浏览器在加载资源方面做得更好，但仍然会遇到并发连接限制。你真的应该使用一些东西，比如Gulp、Webpack等来浓缩和缩小它们。不过，每个图书馆的文档都是你最好的朋友。真是太棒了！这就是我正在寻找的解决方案！看起来效果真的很好，这也是一个很好的做法吗？谢谢

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



@{ 
    Layout = "_Layout"; 
}

@await Component.InvokeAsync("Products", new { date = "2018-09-05" })

@section scripts {
    @await Html.PartialAsync("_DataTableScriptsPartial")
}