Question

以前，HTML页面将在.Net中Blazor的客户端实现上运行Blazor页面的“ @code”部分之前/同时渲染（默认项目中的“ Loading ...”消息）。核心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();
    }
}

在上面的示例中，可以预期的是，有一个微调器显示正在加载数据，但是正在发生的是，在所有元素被实际加载之前（数据永远不会为null），页面才完全加载立刻出现。这就是服务器端实现的工作原理吗？

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

Answer 2

您可以使用

中的新更改

OnAfterRenderAsync（bool firstRender）像这样：

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

    return base.OnAfterRenderAsync(firstRender);
}

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

}

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

3 个答案: