Blazor项目表格产品实时过滤功能失效求助

你的代码存在两个核心问题，导致过滤功能无法正常工作：

1. 输入框未实现双向绑定 #

当前输入框仅通过value="@TitleFilter"做了单向值绑定，但用户输入时不会同步更新TitleFilter、DescriptionFilter、PriceFilter这三个变量。UpdateFilteredProducts方法完全依赖这些变量的最新值执行过滤逻辑，变量未更新自然看不到过滤效果。

修复代码：将输入框的value替换为Blazor双向绑定语法@bind，同时保留@oninput触发过滤：

<input @bind="TitleFilter" @oninput="UpdateFilteredProducts" placeholder="Filter Title" />
<input @bind="DescriptionFilter" @oninput="UpdateFilteredProducts" placeholder="Filter Description" />
<input @bind="PriceFilter" @oninput="UpdateFilteredProducts" placeholder="Filter Price" />

2. 价格过滤逻辑存在缺陷 #

直接将数值类型的Price转为字符串用Contains匹配，会产生不符合预期的结果：比如价格为19.99时，输入9会匹配，输入1也会匹配，但如果用户想做精确数值匹配或范围匹配，这种方式完全不适用。

优化后的过滤逻辑：

private void UpdateFilteredProducts()
{
    if (products == null) return;

    var query = products.AsQueryable();

    // 标题过滤：空输入时不执行过滤
    if (!string.IsNullOrEmpty(TitleFilter))
    {
        query = query.Where(p => p.Title.Contains(TitleFilter, StringComparison.OrdinalIgnoreCase));
    }

    // 描述过滤：空输入时不执行过滤
    if (!string.IsNullOrEmpty(DescriptionFilter))
    {
        query = query.Where(p => p.Description.Contains(DescriptionFilter, StringComparison.OrdinalIgnoreCase));
    }

    // 价格过滤：先尝试将输入转为数值，避免无效输入干扰
    if (decimal.TryParse(PriceFilter, out var targetPrice))
    {
        // 可根据需求修改匹配规则：精确匹配/范围匹配/包含匹配
        query = query.Where(p => p.Price.ToString().Contains(PriceFilter, StringComparison.OrdinalIgnoreCase));
        // 精确匹配示例：query = query.Where(p => p.Price == targetPrice);
        // 大于等于匹配示例：query = query.Where(p => p.Price >= targetPrice);
    }

    filteredProducts = query.ToList();
}

额外注意事项 #

• 确保ProductService.GetProducts()确实返回了非空的产品列表，可在OnInitializedAsync中添加日志或断点验证数据是否加载成功；
• 在UpdateFilteredProducts开头增加if (products == null) return;，避免空引用异常。

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