Bootstrap Blazor表格外键字段过滤问题及全表过滤需求

问题原因 #

Bootstrap Blazor Grid默认过滤逻辑仅对PropertyName指定的直接属性（如Id、FirstName）生效，对于Division、Status这类关联对象，默认只会对比对象本身而非其内部子属性（如Name），导致这类字段无法被过滤。

解决方案 #

1. 全局过滤实现全字段匹配 #

利用你已有的全局过滤输入框，在数据提供方法中手动添加对所有字段（含关联对象子属性）的模糊匹配逻辑：

修改数据提供方法

private async Task<GridDataProviderResult<Employee>> EmployeesDataProvider(GridDataProviderRequest<Employee> request)
{
    if (employees is null)
        employees = await EmployeeModelService.GetEmployees();

    var filteredEmployees = employees.AsQueryable();

    // 处理全局过滤
    if (!string.IsNullOrWhiteSpace(filterValue))
    {
        var lowerFilter = filterValue.ToLowerInvariant();
        filteredEmployees = filteredEmployees.Where(e =>
            e.Id.ToString().Contains(lowerFilter) ||
            (e.FirstName?.ToLowerInvariant().Contains(lowerFilter) ?? false) ||
            (e.LastName?.ToLowerInvariant().Contains(lowerFilter) ?? false) ||
            (e.Genders?.Name?.ToLowerInvariant().Contains(lowerFilter) ?? false) ||
            (e.Division?.Name?.ToLowerInvariant().Contains(lowerFilter) ?? false) ||
            (e.Status?.Name?.ToLowerInvariant().Contains(lowerFilter) ?? false)
        );
    }

    // 保留Grid自带的分页、排序逻辑
    return await Task.FromResult(request.ApplyTo(filteredEmployees));
}

添加入口值变更回调

给过滤值添加变更触发表格刷新的逻辑：

private string filterValue;
private string FilterValue
{
    get => filterValue;
    set
    {
        filterValue = value;
        _ = grid.ReloadAsync(); // 过滤值变化时刷新表格
    }
}

同步修改InputText绑定：

<InputText @bind-Value="@FilterValue" Placeholder="Filter all fields..." />

2. 支持列头单独过滤（可选） #

如果需要保留列头的单独过滤框，需为关联字段列自定义过滤模板，并在DataProvider中处理对应条件：

第一步：添加列过滤模板和变量

<GridColumn TItem="Employee" HeaderText="Division" PropertyName="Division">
    @context.Division.Name
    <FilterTemplate>
        <InputText @bind-Value="@DivisionFilter" Placeholder="Filter Division" />
    </FilterTemplate>
</GridColumn>
<GridColumn TItem="Employee" HeaderText="Status" PropertyName="Status">
    @context.Status.Name
    <FilterTemplate>
        <InputText @bind-Value="@StatusFilter" Placeholder="Filter Status" />
    </FilterTemplate>
</GridColumn>

在@code块中定义过滤变量及变更回调：

private string divisionFilter;
private string statusFilter;

private string DivisionFilter
{
    get => divisionFilter;
    set
    {
        divisionFilter = value;
        _ = grid.ReloadAsync();
    }
}

private string StatusFilter
{
    get => statusFilter;
    set
    {
        statusFilter = value;
        _ = grid.ReloadAsync();
    }
}

第二步：在DataProvider中添加列过滤逻辑

在全局过滤代码后追加列过滤条件：

// 处理部门过滤
if (!string.IsNullOrWhiteSpace(DivisionFilter))
{
    var lowerDivFilter = DivisionFilter.ToLowerInvariant();
    filteredEmployees = filteredEmployees.Where(e => 
        e.Division?.Name?.ToLowerInvariant().Contains(lowerDivFilter) ?? false
    );
}

// 处理状态过滤
if (!string.IsNullOrWhiteSpace(StatusFilter))
{
    var lowerStatusFilter = StatusFilter.ToLowerInvariant();
    filteredEmployees = filteredEmployees.Where(e => 
        e.Status?.Name?.ToLowerInvariant().Contains(lowerStatusFilter) ?? false
    );
}

关键说明 #

• 所有过滤逻辑统一放在DataProvider中处理，确保分页、排序与过滤逻辑协同生效。
• 使用ToLowerInvariant()保证过滤的大小写不敏感。
• 添加空值判断（?? false）避免关联对象为null时抛出空引用异常。

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