Razor Pages：异步填充List后无法更新HTML表格问题

问题分析 #

你遇到的核心问题是：在 OnAfterRenderAsync 中加载数据后调用 StateHasChanged() 未能触发表格重新渲染，导致表格显示空数据。这是因为 OnAfterRenderAsync 是组件已经渲染完成后才执行的生命周期方法，且你的数据加载逻辑存在冗余的同步操作，导致状态更新时机异常。

修复方案 #

1. 替换生命周期方法

将数据加载逻辑从 OnAfterRenderAsync 移到 OnInitializedAsync——这是组件初始化阶段的异步方法，执行完成后 Blazor 会自动触发组件重新渲染，无需手动调用 StateHasChanged()。

2. 修复数据加载的异步逻辑

原代码中 await Task.FromResult(...) 是冗余操作，collection.AsQueryable().ToList() 是同步执行的，无法实现真正的异步加载。改用 MongoDB 驱动提供的 ToListAsync() 扩展方法，实现真正的异步查询。

3. 增加加载状态（可选）

添加加载状态提示，避免用户看到空表格，提升体验。

修改后的代码 #

C# 逻辑部分

@code {
    private List<Item> items = new List<Item>();
    private bool isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        items = await LoadDataAsync();
        isLoading = false;
    }    

    private async Task<List<Item>> LoadDataAsync()
    {
        var database = DBConnection.getDatabase(); 
        IMongoCollection<Item> collection = database.GetCollection<Item>("Prices");
        // 使用ToListAsync实现真正异步查询，需引用MongoDB.Driver.Linq命名空间
        return await collection.AsQueryable().ToListAsync();
    }
}

HTML 渲染部分

<table class="table">
    <thead>
        <tr>
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
    </thead>
    <tbody>
        @if (isLoading)
        {
            <tr>
                <td colspan="2">加载中...</td>
            </tr>
        }
        else
        {
            @foreach (var item in items)
            {
                <tr>
                    <td>@item.avgHighPrice</td>
                    <td>@item.Name</td>
                </tr>
            }
        }
    </tbody>
</table>

修复说明 #

• OnInitializedAsync 在组件初始化时执行，此时组件尚未完成首次渲染，数据加载完成后自动触发渲染，确保表格直接显示加载完成的数据。
• ToListAsync() 替代同步的 ToList()，避免阻塞 UI 线程，符合 Blazor 异步组件的设计规范。
• 加载状态提示让用户明确知道数据正在加载，避免困惑。

内容的提问来源于stack exchange，提问作者D74