Blazor QuickGrid过滤功能无效问题求助

问题根因 #

你的代码存在两个核心问题导致过滤无效：

1. QuickGrid 绑定的数据集错误：当前绑定的是原始的 itemsQueryable，而非你定义的过滤后数据集 FilteredBreweries，所以输入过滤条件后页面根本不会读取过滤结果。
2. 分页总条目数未同步更新：过滤后数据总数变化，但分页组件的 TotalItemCount 没有对应调整，会导致分页逻辑异常。

修复步骤 #

1. 修正 QuickGrid 的 Items 绑定 #

将前端代码中 QuickGrid 的 Items 属性从 @itemsQueryable 改为 @FilteredBreweries：

<div class="grid">
        <QuickGrid Items="@FilteredBreweries" Pagination="@pagination">
            <PropertyColumn Property="@(c => c.name)" Sortable="true" Class="brewery_name" />
            <PropertyColumn Property="@(c => c.city)" Sortable="true" Align="Align.Right" />
            <PropertyColumn Property="@(c => c.state)" Sortable="true" Align="Align.Right" >
                <ColumnOptions>
                    <div class="search-box">
                        <input type="search" autofocus @bind="stateFilter" @bind:event="oninput" placeholder="State ..." />
                    </div>
                </ColumnOptions>
             </PropertyColumn>

            <PropertyColumn Property="@(c => c.brewery_type)" Sortable="true" Align="Align.Right" />
                @*<ColumnOptions>
                    <div class="search-box">
                        <input type="search" autofocus @bind="typeFilter" @bind:event="oninput" placeholder="Brewery Type ..." />
                    </div>
                </ColumnOptions>*@
            <PropertyColumn Property="@(c => c.website_url)" Sortable="true" Align="Align.Right" />
        </QuickGrid>
</div>

2. 完善过滤逻辑并同步分页总数 #

修改 FilteredBreweries 计算属性，添加空值安全处理，并同步分页组件的总条目数：

IQueryable<BreweryEntry> FilteredBreweries
{
    get
    {
        // 处理原始数据集为空的情况，返回空的可查询集合
        var result = itemsQueryable?.Where(c => c.state != null) ?? Enumerable.Empty<BreweryEntry>().AsQueryable();

        if (!string.IsNullOrEmpty(stateFilter))
        {
            result = result.Where(c => c.state.Contains(stateFilter, StringComparison.CurrentCultureIgnoreCase));
        }

        // 若需要恢复类型过滤，取消以下注释
        //if (!string.IsNullOrEmpty(typeFilter))
        //{
        //    result = result.Where(c => c.brewery_type.Contains(typeFilter, StringComparison.CurrentCultureIgnoreCase));
        //}

        // 更新分页组件的总条目数，确保分页逻辑正确
        pagination.TotalItemCount = result.Count();
        return result;
    }
}

3. 初始化分页总条目数 #

在 OnInitializedAsync 方法中，获取数据后初始化分页的总条目数：

protected override async Task OnInitializedAsync()
{
    try
    {
        var breweries = await Http.GetFromJsonAsync<BreweryEntry[]>("https://api.openbrewerydb.org/breweries?per_page=50");
        itemsQueryable = breweries.AsQueryable();
        // 初始化分页总条数
        pagination.TotalItemCount = itemsQueryable.Count();
        pagination.TotalItemCountChanged += (sender, eventArgs) => StateHasChanged();
    }
    catch (Exception e)
    {
        Console.WriteLine(e.Message);
        throw;
    }
}

修复原理 #

修改后，当用户在搜索框输入内容时，stateFilter 会实时更新，触发 FilteredBreweries 重新计算。QuickGrid 绑定的是这个过滤后的数据集，因此会自动渲染过滤结果；同时分页组件的总条目数同步更新，保证分页功能正常工作。

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