c# - 在 API 调用上显示等待或微调器

Question

在我的 Blazor 应用程序中，我正在对后端服务器进行 API 调用，这可能需要一些时间。我需要向用户显示反馈、等待光标或“微调器”图像。这是如何在 Blazor 中完成的？

我已尝试使用 CSS 并打开和关闭 CSS，但在调用完成之前页面不会刷新。任何建议将不胜感激。

@functions {
    UserModel userModel = new UserModel();
    Response response = new Response();
    string errorCss = "errorOff";
    string cursorCSS = "cursorSpinOff";

    protected void Submit()
    {
        //Show Sending...
        cursorCSS = "";
        this.StateHasChanged();
        response = Service.Post(userModel);
        if (response.Errors.Any())
        {
            errorCss = "errorOn";
        }
        //turn sending off
        cursorCSS = "cursorSpinOff";
        this.StateHasChanged();
    }
}

Answer 1

选项 1:使用 Task.Delay(1)

• 使用异步方法。
• 使用await Task.Delay(1) 或await Task.Yield(); 刷新更改

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

选项 1 是一个简单的解决方案，运行正常但看起来像个把戏。

选项 2:使用 Task.Run()(不适用于 WebAssembly)

2020 年 1 月。 @Ed Charbeneau发表BlazorPro.Spinkit project将长进程封闭到任务中以不阻塞线程:

确保您的 LongOperation() 是一个 Task，如果不是，则将其封装到一个 Task 中并等待它:

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

---

效果

Spinner 和服务器端预渲染

因为 Blazor Server 应用程序使用预渲染，微调器不会出现，要向微调器显示长时间操作必须在 OnAfterRender 中完成。

Use OnAfterRenderAsync over OnInitializeAsync to avoid a delayed server-side rendering

    // Don't do this
    //protected override async Task OnInitializedAsync()
    //{
    //    await LongOperation();
    //}

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {            
            await Task.Run(()=> LongOperation());//<--or Task.Delay(0) without Task.Run
            StateHasChanged();
        }
    }

更多样本

了解更多关于如何编写漂亮的微调器的信息，您可以从开源项目中学习 BlazorPro.Spinkit , 它包含聪明的样本。

更多信息

参见 Henk Holterman's answer带有 blazor 内部解释。