关于使用Blazor,以及使用扩展方法中的状态更新UI的指南

问题描述 投票:0回答:1

我正在使用混合式Blazor应用程序创建批量图像处理应用程序。当用户上传一组图像时,会触发一系列方法将其调整为各种分辨率并对其进行优化。

随着这些调整大小和优化的进展,我想实时/连续更新UI。

使用从此方法返回的模型数据更新Blazor UI的一般语法是什么?到目前为止,我所看到的所有示例都没有显示使用服务器端执行的代码对UI进行的更新。

blazor blazor-server-side
1个回答
0
投票

您可以对计时器使用简单的轮询,也可以使用异步流(C#8)。无论哪种方式最适合您的后端数据流。

到目前为止,我尚未看到的任何示例都显示了此UI的更新

我从标准模板制作了这个小演示:

在WeatherForecastService.cs中

    public async IAsyncEnumerable<WeatherForecast> GetForecastAsync(DateTime startDate)
    {
        var rng = new Random();

        for (int index = 1; index <= 5; index++)
        {
            yield return new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            };
            await Task.Delay(500);
        }
    }

和FetchData.razor中的>

List<WeatherForecast> forecasts = new List<WeatherForecast>();

protected override async Task OnInitializedAsync()
{
    await foreach (var forecast in ForecastService.GetForecastAsync(DateTime.Now))
    {
        forecasts.Add(forecast);
        StateHasChanged();
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.