ASP.NET Core 5.0 MVC项目如何通过复选框筛选男士商品列表

你可以按照以下步骤实现分类筛选功能：

• 第一步：修正视图复选框的代码，补充参数传值的格式问题
  修改后的Razor代码如下：

<div class="single-widget category">
    <h3 class="title">@Model.l_ModUDF.Where(x => x.UDFType == "String").FirstOrDefault().UDFID</h3>
    <ul>
        @foreach (var item in Model.l_ModUDFItem.GroupBy(x => x.Category))
        {
            l_ModUDFItem = item.Where(x => x.Category == item.Key).First() ;
            <li>
                <input type="checkbox"
                       name="model"
                       value="@item.Key" 
                       onclick="Categories('@l_ModUDFItem.Category')"/>
                @item.Key
            </li>
        }
    </ul>
</div>

注意：这里给Categories方法的参数加了单引号，避免分类名是字符串时被识别为JS变量报错，同时补充了复选框的value值为对应分类名。

• 第二步：根据业务场景选择筛选实现逻辑

方案1：前端本地筛选（适合商品数据量小，已经全部加载到当前页面的场景） #

首先给渲染的每一个商品项添加data-category属性标注所属分类：

<!-- 商品列表渲染示例 -->
<div id="product-list">
@foreach(var product in Model.ProductList)
{
    <div class="product-item" data-category="@product.Category">
        <!-- 商品图片、名称、价格等展示内容 -->
    </div>
}
</div>

然后添加JS筛选逻辑：

// 存储当前选中的分类，需要支持多选可改为数组类型
let activeCategory = '';
function Categories(selectedCategory) {
    const checkbox = event.target;
    if(checkbox.checked) {
        activeCategory = selectedCategory;
    } else {
        activeCategory = '';
    }
    // 遍历所有商品项控制显隐
    document.querySelectorAll('.product-item').forEach(item => {
        if(!activeCategory || item.dataset.category === activeCategory) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    })
}

方案2：后端请求筛选（适合商品数据量大，需要分页/动态拉取的场景） #

通过AJAX请求后端过滤后的商品数据，局部刷新商品列表：

function Categories(selectedCategory) {
    const isChecked = event.target.checked;
    // 拼接请求参数，支持多选可拼接多个分类参数
    const requestUrl = `/Product/GetFilteredProducts?category=${isChecked ? encodeURIComponent(selectedCategory) : ''}`;
    fetch(requestUrl)
        .then(res => res.text())
        .then(filteredHtml => {
            // 替换商品列表区域的内容
            document.getElementById('product-list').innerHTML = filteredHtml;
        })
}

对应的后端Action示例：

public IActionResult GetFilteredProducts(string category)
{
    var products = _dbContext.Products.AsQueryable();
    if(!string.IsNullOrEmpty(category))
    {
        products = products.Where(p => p.Category == category);
    }
    // 返回商品列表的局部视图
    return PartialView("_ProductList", products.ToList());
}

内容的提问来源于stack exchange，提问作者H.M.Mubashir