Blazor 页面中的加载指示器答案

【问题标题】：Loading indicator in blazor pageBlazor 页面中的加载指示器
【发布时间】：2020-08-10 06:17:58
【问题描述】：

我正在编写一个带有 bazor 页面的 ASP.Net Core 3.1 应用程序。

我想在用户点击按钮时触发（慢速）服务器端计算。

我想要的是在计算过程中输入“正在加载...”消息，然后显示该消息。

这是我在 C# 服务类中所做的：

    public async Task<String> traitement1(String argument)
    {
        Thread.Sleep(5);  // I want to simulate a very slow calculation
        return await Task.FromResult("Finished ! Here is your result...");
    }

这是我在我的 bazor 页面中所做的：

<p>@my_result</p>

<button @onclick="@on_btn_click">Click me</button>

@code 
{
    private String my_result = "";

    private async void on_btn_click()
    {
        my_result = "Loading...";
        my_result = await mon_service.traitement1("aaa");
    }
}

它不起作用...有什么想法吗？

谢谢

【问题讨论】：

这能回答你的问题吗？ Blazor - Display wait or spinner on API call
我希望你意识到Thread.Sleep(5) 会将代码延迟 5 毫秒？浏览器没有足够的时间注册状态更改并重新渲染。此外，您几乎应该从不使用async void。不要使用Thread.Sleep - 对于基于任务的异步方法，请使用Task.Delay(5000) 延迟 5 秒

标签： blazor blazor-server-side

【解决方案1】：

首先，避免async void。 Blazor 完全支持async Task 事件处理程序：

private async Task on_btn_click()
{
    my_result = "Loading...";
    await Task.Delay(1);   // give the Renderer a chance to catch up
    my_result = await mon_service.traitement1("aaa");
}

您需要插入Task.Delay(1);，因为您的traitement1() 并不是真正的异步，它永远不会放弃它运行的线程。 Task.Yield() 会更清楚，但它并不总是有效。

这里不需要调用 StateHasChanged()。

【讨论】：

您能否详细说明最后一点？为什么不调用 StateHasChanged()？
@ChrisJensen - 因为 Blazor 已经在事件之前和之后放置了 StateHasChanged()。前一个在 Delay(1) 中消耗并显示 "Loading.." ，后一个显示结果。
也就是说，如果你有多个由同一个事件触发的更新，你只能在第一次省略 StateHasChanged 调用，对吗？
不，除非您需要 > 2 次屏幕更新，否则您始终可以忽略它。

【解决方案2】：

我有一个可以使用的组件。我刚刚将其更新为您可以自己完成某个流程的百分比，或者如果您知道您的流程需要多长时间，您可以将其设置为定期递增。

如果您不想复制代码，请使用 Nuget：DataJuggler.Blazor.Components

如果你不使用 Nuget，你将需要 circle.scss：

（从我的 GitHub 下载） https://github.com/DataJuggler/DataJuggler.Blazor.Components/blob/master/wwwroot/css/circle.scss

值得称赞的作者是：

安德烈·菲尔乔

http://circle.firchow.net/

无论哪种方式，您都需要将其添加到您的 _host.cshtml 文件中：

Nuget打包方式如下：

<link href="~/_content/DataJuggler.Blazor.Components/css/circle.css" rel="stylesheet" />

或者如果 circle.scss 在你的项目文件中

<link href="~/css/circle.css" rel="stylesheet" />

我试图发布 ProgressBar.razor 和 Progress.razor.cs 代码，但堆栈溢出告诉我我超过了 30,000 个字符的限制，我很难相信这么少的代码，所以这里是链接：

https://github.com/DataJuggler/DataJuggler.Blazor.Components/blob/master/ProgressBar.razor

https://github.com/DataJuggler/DataJuggler.Blazor.Components/blob/master/ProgressBar.razor.cs

用法：

<div class="progresscontainer3">
    <ProgressBar Subscriber=this Increment="0" Interval="125" 
    ClientHandledIncrement="true" 
    CloseAtExtraPercent="0" Visible="@ShowProgress" Theme=ThemeEnum.Dark 
    Color=ColorEnum.Orange
    Size=SizeEnum.Small OverrideThemeColorForText="true" TextColor="White">
    </ProgressBar>
</div>

如果您想查看有效示例、注册或上传图片，请输入以下查询：

https://pixeldatabase.net

隐藏
总计

然后点击应用。

或者这里有一个视频也显示了进度条：

https://youtu.be/K-reLOc1-Uo

我觉得效果不错。

【讨论】：