blazor - StateHasChanged 不在异步调用 Blazor 服务器应用程序上执行

Question

当用户按下特定按钮时，我需要在按钮内显示动画并禁用它(调用的方法需要几秒钟才能完成)。这是我的html:

 <div class="row">
            <div class="col-lg-4">
                @if (IsDownloading)
                {
                    <button class="btn btn-primary float-right search disabled" disabled><span class='fa-left fas fa-sync-alt spinning'></span>Downloading...</button>
                }
                else
                {
                    <button id="REC_PDF" class="btn btn-primary" @onclick="@(()=>getPDF())">Download Labels</button>
                }
                
            </div>
        </div>

这是我的代码:

protected bool IsDownloading { get; set; }

public async Task getPDF()
{
    IsDownloading = true;
    StateHasChanged();

    await generate_pdf(labels);

    IsDownloading = false;
    StateHasChanged();
}

private async Task generate_pdf(List<Tuple<string, string, string, string>> filtered_label)
{
    loading = true;
    string PDF_PATH = "./PDF/" + CurrentValue;
    foreach (Tuple<string,string,string,string> label in filtered_label)
    {

        if (!Directory.Exists(PDF_PATH))
        {
            Directory.CreateDirectory(PDF_PATH);
        }
.......

代码正在运行，但由 StateHasChanged() 调用的页面呈现；当方法 getPDF(和 generate_PDF 随之)完全执行时执行 2 次。

我需要在第一次调用时呈现页面以显示 css 加载动画。

(正如我在其他帖子中所建议的那样，我使用了 InvokeAsync(() => StateHasChanged()); 但不起作用)

谢谢。

Answer 1

点击事件在 Blazor 中是这样处理的:

var task = InvokeAsync(EventMethod);
StateHasChanged();
if (!task.IsCompleted)
{
    await task;
    StateHasChanged();
}

注意 StateHasChanged 实际上并不重新渲染组件，它只是在渲染队列上堆叠一个 RenderFragment 委托(delegate)。

所有代码都在“UI”线程上运行，因此通过调用 StateHasChanged 排队的渲染事件只会被执行:

• 在事件方法产生控制权时
• 如果最后没有发生 yield(因为 Task block 内只有同步代码)。

我在您的 generate_pdf 中看不到任何产生的代码。

尝试以下方法:

public async Task getPDF()
{
    IsDownloading = true;
    await Task.Yield();

    await generate_pdf(labels);

    IsDownloading = false;
}

注意:Directory.CreateDirectory 不是异步方法。只有 FileStream 有异步方法。