blazor页面中的加载指示器

Question

我正在编写一个带有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...");
}

以下是我在集市页面上所做的：

<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，你将需要circ.scs:

(从我的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" />

或者如果circ.scs在您的项目文件中

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

我试着发布ProgressBar.razor和Progress.razor.cs代码，但堆栈溢出告诉我我超过了你的30000个字符的限制，我发现很难相信，因为代码很少，所以这里有链接：

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

然后单击"应用"。

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

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

我觉得效果很好。