Blazor-在API调用上显示等待或微调

问题描述

在我的开拓者应用程序中，我正在对后端服务器进行api调用，这可能需要一些时间.我需要向用户显示反馈，等待光标或旋转"图像.在Blazor中如何完成?

In my blazer app I am making an api call to a back end server that could take some time. I need to display feedback to the user, a wait cursor or a "spinner" image. How is this done in Blazor?

我尝试使用CSS并打开和关闭CSS，但是直到调用完成，页面才会刷新.任何建议将不胜感激.

I have tried using CSS and turning the CSS on and off but the page is not refreshed until the call is completed. Any suggestions would be greatly appreciated.

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

推荐答案

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

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

Option 1: Using Task.Delay(1)

• Use an async method.
• Use await Task.Delay(1) or await Task.Yield(); to flush changes

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是一个简单的解决方案，可以正常运行，但看起来像个把戏.

Option 1 is a simple solution that runs ok but looks like a trick.

2020年1月. @Ed Charbeneau 发布 BlazorPro.Spinkit项目将长进程包含在任务中，以免阻塞线程:

On January'2020. @Ed Charbeneau published BlazorPro.Spinkit project enclosing long processes into task to don't block the thread:

确保您的LongOperation()是Task，如果不是，请将其包含在Task中并等待它:

Ensure your LongOperation() is a Task, if it is not, enclose it into a Task and await for it:

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

---

效果

---

Effect

由于Blazor Server应用程序使用了预渲染，因此微调器将不会出现，因此要显示微调器，长时间操作必须在 OnAfterRender 中完成.

Because Blazor Server apps use pre-rendering the spinner will not appear, to show the spinner the long operation must be done in OnAfterRender.

    // 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中学习，其中包含聪明的示例.

More samples

Learn more about how to write nice spinner you can learn from open source project BlazorPro.Spinkit, it contains clever samples.

请参见汉克·霍尔特曼(Henk Holterman)的答案，其中包含内部细节的解释.

See Henk Holterman's answer with blazor internals explanation.

这篇关于Blazor-在API调用上显示等待或微调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！