Dan*_*Dan 7 .net c# razor .net-core blazor
HTML 页面以前会在 Blazor 页面的“@code”部分运行(默认项目中的“正在加载...”消息)之前/同时在 .Net Core 2.2 中 Blazor 的客户端实现上呈现。但是,在服务器端实现中使用 .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();
}
}
Run Code Online (Sandbox Code Playgroud)
在上面的示例中预期的是,有一个显示数据正在加载的微调器,但发生的情况是页面根本不会加载,直到数据实际加载(数据永远不会为空),其中所有元素同时出现. 这就是服务器端实现的工作方式吗?
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();
}
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3650 次 |
| 最近记录: |