Blazor应用中搜索无结果时如何显示提示并隐藏加载动画

当前代码的问题在于UI逻辑嵌套导致状态判断混乱，加上StreamRendering(true)的流式渲染特性，可能导致异步操作完成后状态更新未正确触发组件重新渲染，从而无法切换到“未找到记录”的提示。

1. 重构UI渲染逻辑，拆分状态判断 #

将加载中、数据存在、无数据三种状态分开判断，避免嵌套逻辑导致的判断错误：

@page "/mypage/{param1}/{param2}"
@attribute [StreamRendering(true)]
@inject appContext myDb ;
@inject NavigationManager Navegator;

<PageTitle>Title</PageTitle>

<!-- 加载中状态 -->
@if (!finishedProcessing)
{
    <div class="text-center">
        <div class="spinner-grow" role="status"></div>
    </div>
}
<!-- 有数据状态 -->
else if (myData.Any())
{
    <h2 class="mb-4 text-center bg-success rounded-3 shadow-lg p-2 text-white">My Title</h2>
    <table class="table table-striped table-hover">
        <thead>
            <!-- 表头内容 -->
        </thead>
        <tbody>
            @foreach (var item in myData)
            {
                <!-- 表格行内容 -->
            }
        </tbody>
    </table>
}
<!-- 无数据状态 -->
else
{
    <div>
        <h1>未找到记录</h1>
    </div>
}

@code {
    [Parameter]
    public string? param1 { get; set; }

    [Parameter]
    public string? param2 { get; set; }

    private bool finishedProcessing = false;
    private IEnumerable<Sncr> myData = Enumerable.Empty<Sncr>();

    protected override async Task OnInitializedAsync()
    {
        // 确保参数不为空再执行查询
        if (!string.IsNullOrEmpty(param1) && !string.IsNullOrEmpty(param2))
        {
            myData = await myDb.Sncrs
                .Where(x => x.Column1.StartsWith(param1) && x.column2 == param2)
                .Take(20)
                .ToListAsync();
        }
        finishedProcessing = true;
        // 手动触发状态变更，适配StreamRendering模式
        StateHasChanged();
    }
}

2. 关键修改点说明 #

• 拆分状态判断：将加载中、有数据、无数据三个状态独立判断，避免原嵌套逻辑中可能出现的判断遗漏。
• 参数空值检查：增加参数有效性判断，防止空参数导致的查询错误。
• 手动触发状态更新：在异步操作完成后调用StateHasChanged()，确保finishedProcessing和myData的变更能立即触发组件重新渲染，适配StreamRendering(true)的流式渲染特性。
• 使用私有字段：将finishedProcessing和myData改为私有字段，符合Blazor组件的最佳实践，减少不必要的公共属性访问。

修改后，页面加载时会先显示加载动画；异步查询完成后：

• 若有数据，自动切换为显示表格；
• 若无数据，自动隐藏加载动画并显示“未找到记录”提示。

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