使用 IJSRuntime Blazor 时的屏幕呈现问题

Question

首先，我很抱歉我的英语水平不好。

我目前正在通过 dotnet core 3.1 blazor 开发一个 web 项目。

如下面的源码，我使用IJSRuntime来调用一个Javascript函数，需要很长时间。

[Inject]
IJSRuntime JSRuntime { get; set; }
private async Task BtnDisplay()
    await JSRuntime.InvokeVoidAsync("RefreshWebJS", Data);
}

Javascript函数需要很长时间，所以我在下面添加了源以添加微调器。

private async Task BtnDisplay()
{
    showLoadingImg = true; // add
    await JSRuntime.InvokeVoidAsync("RefreshWebJS", Data);
    showLoadingImg = false;
}

剃须刀页面上的微调器定义如下：

@if (showLoadingImg == true)
{
    <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center;">
    <img src="/images/LoadingImg.gif" style="position: absolute; top: 50%; left: 50%;" />
    </div>
}

“StateHasChanged()”或“await InvokeAsync(() => StateHasChanged())”也不起作用。

当我使用 Task 而不是 JSRuntime 时效果很好。

await Task.Delay(1000); 

为什么我使用 JSRuntime.InvokeVoidAsync 不起作用？

感谢您阅读难读的英文。

Answer 1

private async Task BtnDisplay()
{
    showLoadingImg = true; // add
    await Task.Delay(1);
    await JSRuntime.InvokeVoidAsync("RefreshWebJS", Data);
    showLoadingImg = false;
}

Blazor 会在您在异步任务中 await 的第一个 Task 完成时自动重新渲染。

因此，如果第一个 Task 是您长时间运行的进程，那么在完成之前它不会重新渲染。

添加await Task.Delay(1) 是一种允许在长时间运行进程之前进行渲染的简单方法。

延伸阅读：https://github.com/dotnet/aspnetcore/issues/22159

这是 Blazor 工作方式的已知功能，Blazor 的创建者也在该线程中推荐了这种方法（尽管他更喜欢 await Task.Yield() - 我总是忘记使用它！）

Answer 2

正如之前的评论中提到的，还有一种使用同步事件处理程序的方法，它在新任务中启动 JS 互操作并在此之后立即返回。您必须确保在此新任务完成后重新同步它，使用await InvokeAsync(StateHasChanged)：

private bool ShowLoading = false;

private void HandleButtonClick()
{
    ShowLoading = true;
    Task.Run(async () => await CallLongRunningJs())
        .ContinueWith(t => { ShowLoading = false; InvokeAsync(StateHasChanged); });
}

private async Task CallLongRunningJs()
{
    await jsRuntime.InvokeVoidAsync("longRunningJsFunc", "data...");
}

它比 Magoo 先生提出的 Task.Yield() 方法更冗长，但我认为为了完整起见，最好在此提及。