以前的 HTML 页面会在 .Net Core 2.2 中 Blazor 的客户端实现上运行 Blazor 页面的“@code”部分（默认项目中的“正在加载...”消息）之前/同时呈现。但是，对于我在服务器端实现上使用 .NET Core 3.0 和 Blazor 来说，这种情况不再发生。
例如，包含从数据库获取数据的表格的页面仍会加载页面上的所有其他元素（标题、标签、表格标题等），但现在页面仅在所有数据都已加载后才加载。从数据库中拉取/“OnInitAsync”方法中的操作已完成。除此之外，没有向用户发出“正在加载”信号，表明单击页面实际上正在加载任何内容。他们需要等待 10-15 秒才能加载所有数据（无旋转光标/提示）。
简而言之，我想要这样做，以便用户知道页面正在加载，但理想情况下我希望这样，以便页面 HTML 被渲染，并且任何尚未完成的数据/操作在准备好时出现（它是如何工作的）在客户端实现中）。
我是 Web 开发/Blazor 的新手，所以我在这里很困惑。我尝试到处寻找一些提示，但考虑到它是多么新，那里没有太多提示。我什至尝试让它与默认项目（WeatherForecaseService）一起工作，但即使在那里它也不起作用。
<html> a bunch of HTML </html>
@if (data == null)
{
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
}
@code
{
Data[] data;
protected override async Task OnInitAsync()
{
data = await TaskService.GetDataAsync();
}
}
上面的示例中预期的是有一个微调器显示数据正在加载，但实际情况是页面根本不会加载，直到数据实际加载（数据永远不为空），其中所有元素都出现在一次。这就是服务器端实现的工作原理吗？
Issac 在评论中指出了解决方案：
尝试改用 OnAfterRenderAsync
我只是写代码：
@code
{
protected bool Rendered = false;
protected async override Task OnAfterRenderAsync()
{
if (!Rendered)
{
Rendered = true;
await OnAfterFirstRenderAsync();
}
}
protected async Task OnAfterFirstRenderAsync()
{
data = await TaskService.GetDataAsync();
}
}
2024 年 11 月 8 日编辑：
自 NET Core 3.0 Preview 9 起，OnAfterRender 接收一个布尔参数，让方法知道这是否是第一次渲染。 无需声明
Rendered我在 .Net Core 5 上使用 Blazor Webassemble 时遇到了类似的问题，我的组件在调用 JS 函数和数据之前加载。使用@daniherrera 方法有助于解决这个问题。请参阅下面的代码：
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await OnAfterFirstRenderAsync();
//Invoke Js funtion
await JS.InvokeAsync<string>("JsFuntion", "#HTMLElement");
}
}
protected async Task OnAfterFirstRenderAsync()
{
data = await someMethod.GetDataAsync();
StateHasChanged();
}
}
您可以使用
中的新更改OnAfterRenderAsync(bool firstRender) 像这样：
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//Your code
}
return base.OnAfterRenderAsync(firstRender);
}