在blazor页面中加载指示器

Question

我正在编写一个带有bazor页面的ASP.Net Core3.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");
    }
}

它不工作..。有什么想法吗？

谢谢

Answer 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()。

Answer 2

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

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

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

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

值得称赞的作者是：

Andre Firchow

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

隐藏

总数< 40

然后单击Apply。

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

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

我认为它工作得很好。