ASP.NET Core MVC电商多品牌多类别复选框筛选失效求助

1. 前端复选框命名修正（核心问题） #

要实现多选项筛选，复选框的name属性必须设置为数组格式，这样前端才能将多个选中值打包传递给后端。示例代码如下：

<!-- 品牌复选框 -->
@foreach (var brand in Model.Brands)
{
    <div class="form-check">
        <input class="form-check-input brand-checkbox" 
               type="checkbox" 
               id="brand-@brand.Id" 
               name="brandIds[]" 
               value="@brand.Id">
        <label class="form-check-label" for="brand-@brand.Id">@brand.Name</label>
    </div>
}

<!-- 分类复选框 -->
@foreach (var category in Model.Categories)
{
    <div class="form-check">
        <input class="form-check-input category-checkbox" 
               type="checkbox" 
               id="category-@category.Id" 
               name="categoryIds[]" 
               value="@category.Id">
        <label class="form-check-label" for="category-@category.Id">@category.Name</label>
    </div>
}

• name="brandIds[]"和name="categoryIds[]"是关键：告诉浏览器将多个选中值作为数组提交。
• ID只需保证唯一（如brand-@brand.Id），不影响参数传递，仅用于和label关联。

2. 前端Ajax数据收集逻辑 #

修改Ajax代码，主动收集所有选中的复选框值，避免依赖表单自动提交的默认行为：

// 监听复选框/排序控件的变化事件
$('.brand-checkbox, .category-checkbox, #sortByDropdown').on('change', function() {
    // 收集选中的品牌ID，转为数组
    const selectedBrands = $('.brand-checkbox:checked').map(function() {
        return $(this).val();
    }).get();
    
    // 收集选中的分类ID，转为数组
    const selectedCategories = $('.category-checkbox:checked').map(function() {
        return $(this).val();
    }).get();
    
    // 获取当前排序值
    const sortBy = $('#sortByDropdown').val();

    // 发送筛选请求
    $.ajax({
        url: '@Url.Action("FilterProducts", "Home")',
        type: 'GET',
        data: {
            brandIds: selectedBrands,
            categoryIds: selectedCategories,
            sortBy: sortBy
        },
        success: function(result) {
            $('#productsContainer').html(result); // 更新商品列表区域
        },
        error: function(xhr) {
            console.error('筛选请求失败:', xhr.responseText);
        }
    });
});

3. 后端参数接收与EF Core查询调整 #

后端Action需接收数组类型的参数，并通过Contains方法实现多值筛选（对应SQL的IN操作）：

public IActionResult FilterProducts(int[] brandIds, int[] categoryIds, string sortBy)
{
    var productQuery = _context.Products.AsQueryable();

    // 多品牌筛选：如果有选中的品牌，保留包含这些ID的商品
    if (brandIds != null && brandIds.Length > 0)
    {
        productQuery = productQuery.Where(p => brandIds.Contains(p.BrandId));
    }

    // 多分类筛选：同理
    if (categoryIds != null && categoryIds.Length > 0)
    {
        productQuery = productQuery.Where(p => categoryIds.Contains(p.CategoryId));
    }

    // 保留原有的排序逻辑
    switch (sortBy)
    {
        case "priceAsc":
            productQuery = productQuery.OrderBy(p => p.Price);
            break;
        case "priceDesc":
            productQuery = productQuery.OrderByDescending(p => p.Price);
            break;
        case "nameAsc":
            productQuery = productQuery.OrderBy(p => p.Name);
            break;
        default:
            productQuery = productQuery.OrderBy(p => p.Id);
            break;
    }

    return PartialView("_ProductList", productQuery.ToList());
}

4. 调试验证步骤 #

1. 打开浏览器开发者工具（F12），切换到Network标签，触发筛选操作，查看请求URL中的参数是否包含brandIds=1&brandIds=2这类多值格式。
2. 在后端Action中添加断点，检查brandIds和categoryIds数组是否正确接收了选中的ID。
3. 查看EF Core生成的SQL语句（可通过日志或第三方工具），确认WHERE ... IN (...)语句是否正确生成。

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