如何在Blazor QuickGrid中显示加载指示器？

因为QuickGrid内部会自行触发IQueryable的查询操作，我们没法直接捕获它的执行时机，所以要手动接管数据加载流程，才能控制加载状态的显示。具体实现如下：

调整数据加载逻辑，手动控制查询时机 #

把原来直接赋值IQueryable的逻辑，改成异步加载数据并维护加载状态：

Razor页面代码 #

@using Microsoft.AspNetCore.Components.QuickGrid
@inject ActivityService ActivityService

@if (isLoading)
{
    <div style="display: flex; justify-content: center; padding: 2rem;">
        <p>数据加载中...</p>
        <!-- 可替换为自定义加载动画组件 -->
    </div>
}
else
{
    <QuickGrid Items="results" />
}

后台代码 #

private List<Activity> results { get; set; } = new();
private bool isLoading { get; set; } = true;

protected override async Task OnInitializedAsync()
{
    isLoading = true;
    
    // 手动执行IQueryable异步查询（假设ActivityService.GetActivities()返回IQueryable<Activity>）
    results = await ActivityService.GetActivities().ToListAsync();
    
    isLoading = false;
}

关键说明 #

• 直接给QuickGrid赋值IQueryable时，查询操作是在QuickGrid内部渲染阶段才触发的，这个过程无法被外部监听，所以没法显示加载状态。
• 手动调用ToListAsync()（适配EF Core等支持异步查询的数据源）能把延迟执行的查询转为可控的异步操作，通过isLoading变量精准控制加载指示器的显示时机。
• 如果GetActivities()是同步方法，可通过Task.Run()包裹避免阻塞UI线程：

  results = await Task.Run(() => ActivityService.GetActivities().ToList());
  

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