3

我试图弄清楚为什么我无法在 Blazor 中获取 OnAfterRenderAsync 方法。

在尝试了多个选项并查看了 Microsoft 文档后，我似乎无法找到解决方案，我确定我遗漏了一些东西，但我无法弄清楚问题是什么。

在下面的代码中，调用了 OnInit 函数，但没有调用渲染函数。


<h1>OnInit & OnInitAsync Demo</h1>

@foreach (var item in EventType)
{
    @item
    <hr />
}

@code{
    List<string> EventType = new List<string>();

    protected override void OnInitialized()
    {
        EventType.Add("Initilaized");
    }

    protected override void OnAfterRender(bool firstRender)
    {
        EventType.Add("OnAfterRender is called");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        EventType.Add("OnAfterRenderAsync is called");
        await Task.Delay(1000);
    }
}

这是我的 .csproj 文件


<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

</Project>

这是我的 _Host.cshtml


<app>
     <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

我也试过这种方式


@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))

为什么没有触发事件？

4

4 回答 4

1

尝试将以下行添加到 _Host.cshtml 中正文（而不是标题）的末尾：

<script src="_framework/blazor.server.js"></script>
于 2020-07-13T22:28:57.043 回答
0

它们被称为好吧，只是没有渲染。

做这个小改动，你的屏幕会循环更新：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    EventType.Add("OnAfterRenderAsync is called " + firstRender);
    await Task.Delay(1000);
    StateHasChanged();  // inform the system that the screen needs updating
}
于 2020-06-14T06:38:45.070 回答
0

如果您使用服务器模式，可能您忘记了 Startup.cs 中的 MapBlazorHub

app.UseEndpoints(endpoints =>
        {
            endpoints.MapDefaultControllerRoute();
            endpoints.MapBlazorHub();
            endpoints.MapControllers();
            endpoints.MapFallbackToPage("/_Host");
        });
于 2021-06-04T09:56:41.280 回答
0

正如@user13925483 提到的，需要添加：

<script src="_framework/blazor.server.js"></script>

在 _Host 文件的末尾。

但问题是为什么。来自微软文档：

在服务器上的预渲染过程中不会调用 OnAfterRender 和 OnAfterRenderAsync。在预渲染后交互渲染组件时调用这些方法。当应用程序预呈现时：

  1. 该组件在服务器上执行以在 HTTP 响应中生成一些静态 HTML 标记。在此阶段，不会调用 OnAfterRender 和 OnAfterRenderAsync。
  2. 当 Blazor 脚本（blazor.webassembly.js 或 blazor.server.js）在浏览器中启动时，组件将以交互式呈现模式重新启动。重新启动组件后，将调用 OnAfterRender 和 OnAfterRenderAsync，因为应用不再处于预渲染阶段。

即使您创建了空的 Blazor 服务器项目，您也可以在Pages/_Host.cshtmlHTML 正文末尾的此脚本行中找到：

@page "/"
@namespace WebApplication6Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebApplication6Server</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="WebApplication6Server.styles.css" rel="stylesheet" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.server.js"></script>  @* <-------- this line *@
</body>
</html>
于 2022-01-30T06:50:58.093 回答