如何在剃须刀组件中动态显示信息列表 [英] How to show a list of information on the fly in a razor component

问题描述

我有一个数据库，并且一个表中有很多条目.我想使用blazor在网页上显示这些条目.

I have a database and a lot of entries in a table. I want to show those entries on a webpage, using blazor.

我尝试使用 context.tableName.Load()和 context.tableName.Local 加载条目，并使用

I have tried loading the entries using context.tableName.Load() and context.tableName.Local and iterating through the entries using

@foreach(var entry in localList){
    <p>@entry.Name</p>
}

这很好..但是它首先从数据库中加载所有数据，最后完成后，它开始呈现页面/结果.

That works fine.. but it first loads all the data from the database and when it finally has finished, it starts rendering the page/results.

我想显示立即加载的结果，随着加载的继续在网页上弹出响应.有什么想法可以实现吗?

I want to show the results that have been loaded immediately, popping up responsive on the webpage as the loading continues. Any ideas how I would implement that?

谢谢！

推荐答案

您描述的内容与 IAsyncEnumerable<> 的功能匹配.

What you describe matches what IAsyncEnumerable<> does.

只是为了好玩，我对标准入门应用程序做了一些修改:

Just for fun I adapted the standard starter app a little:

在WeatherForecastService中:

In WeatherForecastService :

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

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

，并在FetchData.razor页面中:

and in the FetchData.razor page:

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

protected override async Task OnInitializedAsync()
{
    await foreach (var forecast in ForecastService.GetForecastAsync(DateTime.Now))
    {
        forecasts.Add(forecast);
        StateHasChanged();
    }
}

请注意，这不是一种非常有效的数据移动方式，但在某些情况下可能会起作用.

be aware that this is not a very efficent way of moving data but it might work for some scenarios.

这篇关于如何在剃须刀组件中动态显示信息列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！