4

我有一个 Blazor Server 应用程序，我需要在加载文档时运行 js 函数 - 当我使用“静态”模式时，jQuery$(document).ready()工作正常，但我需要使用“ServerPrerendered”模式 - 当用户单击导航栏上的不同链接时， $(document).ready() 永远不会触发，因为 Blazor 使用 SingalR 更新内容。建议的方法是使用JSRuntime.InvokeVoidAsync("jsfunctiont")inside OnAfterRenderAsync，defaultLayout.razor但问题是此事件发生在所有子组件完全呈现之前，因此我的 js 函数将失败。我的问题是在所有子组件完全渲染后调用js函数的方式是什么？这相当于$(document).ready()在 Blazor 服务器应用程序中使用“ServerPreRendered”模式？

太感谢了！

4

3 回答 3

7

OnAfterRender（firstRender == true）是你需要的。直到在浏览器中呈现整个内容之后才会触发。

但是，在您的页面创建后，内容会发生变化，因此将创建新组件并销毁现有组件。如果您jsfunction需要挂钩页面上的每个组件，而不管它是何时创建的，那么您的方法将行不通。您需要各个组件也覆盖OnAfterRenderAsync并调用jsfunction传递对它们自己的引用。

于 2020-09-22T07:34:04.933 回答
1

$(document).ready()通过 SignalR（使用 Blazor 服务器端）添加/删除新组件时不触发同样的挑战。

而不是挂钩到每个组件OnAfterRenderAsync并调用JsRuntime.Invoke..我通过使用解决它 $(document).on('DOMSubtreeModified', function () { // doyourwork });

于 2021-04-29T11:49:16.357 回答
0

我需要这个，以便在单击移动屏幕中的链接后折叠我的 Bootstrap5 菜单。我的解决方案是把它放在我的 _Layout.chtml 文件中，它只会在 Navbar 实际折叠时执行，注意我给我的 NavBar 切换按钮一个 id “navbarToggler”：

    // Make Bootsrap NavBar collapse after clicking on a link.
    $(document).on('DOMSubtreeModified', function () { 
        if ($('#navbarToggler').hasClass('collapsed'))
        {
            $('.nav-link').on("click", function() {
                $('button.navbar-toggler').click();
            });
        }
    });
于 2022-02-21T00:06:55.390 回答