OnAfterRenderAsync not triggered

我试图弄清楚为什么我无法在 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))

为什么没有触发事件？

尝试在_Host.cshtml 中将以下行添加到正文(而不是头部(的末尾：

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

如果你使用服务器模式，也许你在Startup中忘记了MapBlazorHub.cs

app.UseEndpoints(endpoints =>
{
endpoints.MapDefaultControllerRoute();
endpoints.MapBlazorHub();
endpoints.MapControllers();
endpoints.MapFallbackToPage("/_Host");
});

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

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

在_Host文件的末尾。

但问题是为什么。从Microsoft文档：

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

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

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

我希望你说它没有"触发"OnAfterRenderAsync，因为你没有看到页面上列出的事件？

这是因为OnAfterRenderAsync后没有自动渲染 - 以避免循环。

您可以执行此操作 - 因为条件确保它只会发生一次 - 以触发另一个渲染，然后您将看到页面上列出的事件。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
EventType.Add("OnAfterRenderAsync is called");
if (firstRender) 
{
StateHasChanged();
}
}

我遇到了这个问题，因为我正在使用：

app.MapBlazorHub().RequireAuthorization();

将允许匿名添加到我的_Host文件中没有任何作用。作为临时修复，我不得不移除管道.RequireAuthorization因为我不在旅行并且无法连接到身份服务器以提供更好的答案。页面加载正常，但此事件 OnAfterRenderAsync 不会触发，直到我删除.RequireAuthorization

相关内容

最新更新

热门标签：