时间戳

首页 > 解决方案 > 是否可以在执行代码之前加载服务器端 Blazor 页面 HTML？

c# - 是否可以在执行代码之前加载服务器端 Blazor 页面 HTML？

问题描述

以前的 HTML 页面将在 Blazor 页面的“@code”部分在 .Net Core 2.2 中的 Blazor 客户端实现上运行之前/同时呈现（默认项目中的“正在加载...”消息）。但是，在服务器端实现上使用带有 Blazor 的 .NET Core 3.0 不再发生这种情况。

例如，带有从数据库中获取数据的表的页面仍会加载页面上的所有其他元素（标题、标签、表头等），但现在页面仅在所有数据被提取后加载从数据库/“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();
    }
}

上面示例中的预期是有一个微调器显示数据正在加载，但发生的情况是页面根本不加载，直到数据实际加载（数据永远不会为空），其中所有元素同时出现. 这就是服务器端实现的工作方式吗？

标签： c#.netrazor.net-coreblazor

解决方案

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();
    }
}

推荐阅读