Question

我有一个带有列表和“编辑”页面的Blazor WebAssembly应用程序。

当我查看实体列表并使用NavLink组件单击一个实体进行编辑时，浏览器导航到“编辑”页面，显示我的Loader组件，直到页面被加载。

那很好。

在“编辑”页面上单击“保存”时，如果成功，我将导航回到“列表”页面。

private async Task OnValidSubmitAsync()
{
    this.IsBusy = true;

    var @event =
        await this.EventService.UpdateByIdAsync(
            this.Id,
            this.EventUpdateOptions);

    this.IsBusy = false;

    this.NavigationManager.NavigateTo($"/teams/{this.Event.Team.Id}/events");
}

我希望发生的是它将导航到“列表”页面，再次显示我的Loader组件，然后呈现“列表”页面。

虽然发生了什么，但它一直停留在“编辑”页面上，直到呈现“列表”页面为止，我再也没有看到我的Loader组件，并且对用户来说，它似乎只是挂在“编辑”页面上。

解决方法是在完成保存实体后，在OnValidateSubmitAsync中显示我的加载程序。

我是Blazor的新手，仍然可以缩短页面生命周期，因此我的方法很可能是错误的。对这里发生的事情以及是否有一种方法可以强制“列表”页面与加载程序一起显示，感到有些困惑。

希望这很有道理。 ?

Answer 1

根据您对@enet答案的评论，一个可能的答案是您的列表加载页面永远不会破坏UI线程的列表加载逻辑，因此从本质上讲，所有内容仍在同步运行。在这种情况下，有两种简单的方法可以解决此问题。

方法1

可以在页面加载时使用OnInitializedAsync替代项来加载列表。重要的是，您需要在加载列表之前在方法中做一些事情，这将导致运行时建立任务延续并将控制权返回给UI线程，Task.Delay();的工作原理很好。因此，您的方法如下所示：

protected override async Task OnInitializedAsync()
{
    // await the delay, breaks the UI thread free from following logic
    await Task.Delay(1);

    // Populate your list with a background task that you await
    // Assumes you already have the list initialized and just need values
    ListValues = await Someservice.GetListValuesAsync();

    // You may not need this call, but if so you might need to invoke it async
    // Doing so will synchronize back to the UI thread 
    await InvokeAsync(StateHasChanged);
}

方法2

您可以使用OnAfterRenderAsync覆盖来加载数据。关键是您将初始UI状态设置为将加载组件显示为默认操作，然后使用如下方法：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        ListValues = await Someservice.GetListValuesAsync();

        // Since you awaited the list population, now you can update UI
        MethodToSwitchUiToListView();

        // this may be needed as well
        await InvokeAsync(StateHasChanged);
    }
}

相对于方法1，我倾向于使用方法2，因为它允许我构建非常简单的UI来表示加载状态，然后并行加载多个部分并在数据可用时切换UI。其次，在Blazor Server中（似乎不适用于您的情况），OnInitializedAsync方法被调用两次，而OnAfterRender仅被调用一次。无论哪种方法都可以。

让我知道这是否有帮助。

P.S。 -NavigationManager.NavigateTo()方法也将可选的第二个参数用作布尔值，以强制加载页面。如果设置为true，则将强制强制重新加载和刷新。如果您还没有这样做，我建议您尝试一下，因为导航回到当前页面会很有用。一个例子就是复杂的表单重置之类的事情，在这种情况下，从头开始而不是在整个地方尝试反转状态更有意义，并且我遇到了一些令人沮丧的情况，这些问题可以通过第二个简单的参数来解决。此可能也会为您提供帮助。

导航到不立即显示新页面

1 个答案: