在 ASP.NET Core PartialView 中加载脚本后渲染脚本部分

Posted 2023-03-31

【中文标题】在 ASP.NET Core PartialView 中加载脚本后渲染脚本部分

【英文标题】：Render Scripts-Section after scripts were loaded in ASP.NET Core PartialView

【发布时间】：2017-01-10 17:52:40

【问题描述】：

在 ASP.NET Core 应用程序中，我有一个带有小部件的仪表板。每个小部件都有自己的 PartialViews，所以整个页面的生成方式如下：

-Layout.cshtml

--Dashboard.cshtml

--- Widget1.cshtml

--- Widget2.cshtml

根据快速页面加载时间的最佳实践，javascript 在 Layout.cshtml 中的关闭 </body> 标记之前加载。之后，有一个自定义 JS 部分，我通常使用它来在页面加载时启动对象。所以这部分看起来像这样：

<script asp-append-version="true" type="text/javascript" src="~/clientscript/page.min.js"></script>
@RenderSection("Js", required: false)

在我的视图中，使用 Layout.cshtml 作为布局（在这个例子中，它的 Dashboard.cshtml），我可以定义一个类似的部分

@section Js 
    // Js Code here

在包含所有脚本文件的脚本标记之后呈现。所以我可以肯定，像 jQuery 或自定义类这样的所有依赖项都可以在这里使用。

但是例如，我还需要在像 Widget1.cshtml 这样的小部件中执行此操作。问题是：我在 Dashboard.cshtml 中加载了 PartialView Widget1.cshtml。在documentation is written，这是不可能的：

如果您在局部视图中声明 Razor 部分，则其父级将看不到它；它将仅限于部分视图。

但这正是我所需要的。有没有办法解决这个限制？很快，我们的目标就是将 JavaScript 从 PartialView 注入到 LayoutView 中，在它们之间有一个常规的 View。

我知道的唯一方法是使用 setInterval() 以像 50 毫秒这样的低间隔，并在那里检查 jQuery 或我的一些自定义类是否在循环中定义，直到它们被定义。它是一个 JS 解决方案。但是它可以直接在 PartialView 中包含脚本块而不使用部分。当您依赖像 jQuery 这样的单个变量时，它非常适合。

但我需要等待自定义类被加载。它们包含在 jQuery 之后。所以编写像waitForTypeLoaded(type, callback) 这样的通用函数是不可能的。这会导致我总是编写原始的 setInterval() 代码，这对我来说似乎不是一个聪明的解决方案。

【问题讨论】：

也许我误解了您的需求，但部分视图仍然可以访问父级呈现的资产（如 css、js 等）。你是说你想在widget1.cshtml 中运行一个脚本，但是还没有渲染支持脚本吗？如果是这种情况，你需要编写一个 js 事件来让你知道它何时加载。

【参考方案1】：

在完成加载 Jquery 后，我在部分视图和视图组件中为运行脚本所做的事情是在页面加载完成后，我使用“DOMContentLoaded”事件来加载我的所有 jQuery js 脚本。这样我就可以推迟 jQuery 的加载并且在我的页面上仍然有 jQuery 代码。

<script>
    window.addEventListener('DOMContentLoaded',
        function() 
            $('body')....

        );
</script>

【参考方案2】：

您的问题可以按照我对这篇文章的回答中所述解决： How to render scripts, generated in TagHelper process method, to the bottom of the page rather than next to the tag element?

总而言之，您可以创建一对标签助手，一个可以位于局部视图中并将其内容存储在临时字典中，另一个将内容呈现在适当的位置（例如在布局页面）。我广泛使用它来渲染小型动态创建的脚本作为主体的最终脚本。

希望对你有帮助。

【参考方案3】：

老实说，如果你有这样的困境，我会退后一步重新审视建筑。

为什么不添加将用于主布局的几个视图/部分视图的所需脚本？在 ASP.NET MVC 中，您可以使用捆绑机制（或者您可以编写我们自己的） - 缩小并将它们与其他需要的捆绑。不会很重...

你的方法看起来不必要的复杂。

【讨论】：

.ASP.NET MVC Core 捆绑的工作方式不同，在这种情况下不能很好地工作。