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

【问题标题】：Is it possible to load a server side Blazor pages HTML before the code is executed?是否可以在执行代码之前加载服务器端 Blazor 页面 HTML？
【发布时间】：2019-12-14 07:45:38
【问题描述】：

以前的 HTML 页面将在 Blazor 页面的“@code”部分在 .Net 中的客户端实现上运行之前/同时呈现（默认项目中的“正在加载...”消息）核心 2.2。但是，在服务器端实现上使用带有 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();
    }
}

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

【问题讨论】：

感谢 dani，但这似乎是如何停止而不是如何启用...这也适用于较旧的预览版本 (4)，现在我已经 7 岁了。
尝试使用 OnAfterRenderAsync 代替

标签： c# .net razor .net-core blazor

【解决方案1】：

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

【讨论】：

dani herrera，看到这个：github.com/aspnet/AspNetCore/blob/…
还要注意 IComponentContext
@Issac, IComponentContext 在这种情况下也很有用。谢谢你的技巧！
非常感谢！代码几乎可以工作，我只需要在 await OnAfterFirstRenderAsync() 调用之后添加一个 this.StateHasChanged() 调用。在那之后，我很高兴去。再次感谢！！！！
@marshota87，看看stackoverflow.com/a/56675814/842935

【解决方案2】：

你可以使用新的变化

OnAfterRenderAsync(bool firstRender) 像这样：

protected override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        //Your code
    }

    return base.OnAfterRenderAsync(firstRender);
}

【讨论】：

【解决方案3】：

我在 .Net Core 5 上使用 Blazor Webassembly 时遇到了类似的问题，我的组件在调用 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();
    }

}

【讨论】：