MVC Razor中如何通过下拉框onChange事件过滤供应商记录

嘿，这个需求挺常见的，我给你两种实现思路，你可以根据自己的场景挑合适的：

方案1：客户端本地过滤（适合数据量小的场景） #

这种方式不用额外请求后端，直接在页面上对已加载的供应商数据做筛选，效率很高。

首先调整你的视图代码，给供应商列表加个容器，同时给每个供应商项带上对应的分类ID标识：

<div class="half-left"> 
    @Html.DropDownListFor(x => x.subCatObj.SubCategory_Id, Model.GetAllSubCategory, "--Select--", new { @id = "subCategory", @class = "contactField" }) 
</div>

<!-- 给供应商列表加专属容器，方便后续JS操作 -->
<div id="vendorList">
    @foreach (var vendor in Model.GetAllVendors) {
        <!-- 每个供应商项添加data属性，存储对应的分类ID -->
        <div class="vendor-item" data-category-id="@vendor.SubCategory_Id">
            @vendor.VendorCompanyName
        </div>
    }
</div>

然后添加JavaScript代码（用jQuery会更简洁，原生JS也能实现，这里用jQuery举例）：

// 监听下拉框的change事件
$('#subCategory').on('change', function() {
    const selectedCategoryId = $(this).val();
    
    // 如果选中的是默认的"--Select--"，显示所有供应商
    if (!selectedCategoryId) {
        $('.vendor-item').show();
        return;
    }
    
    // 否则只显示匹配当前分类ID的供应商
    $('.vendor-item').hide();
    $(`.vendor-item[data-category-id="${selectedCategoryId}"]`).show();
});

注意：你的Vendor模型需要包含SubCategory_Id属性，这样才能在视图里输出对应的分类关联ID哦。

方案2：AJAX异步过滤（适合数据量大的场景） #

如果供应商数据很多，一次性加载到页面会影响性能，那就用异步请求的方式，每次下拉框变化时再去后端拉取对应分类的供应商数据。

第一步：后端添加接口 #

在你的Controller里新增一个Action，用来根据分类ID返回对应供应商：

public ActionResult GetVendorsByCategory(int subCategoryId)
{
    // 这里替换成你实际的业务逻辑，比如从数据库查询对应分类的供应商
    var targetVendors = _vendorRepository.GetVendorsBySubCategory(subCategoryId);
    // 返回部分视图（也可以返回JSON，看你需求）
    return PartialView("_VendorListPartial", targetVendors);
}

第二步：创建部分视图 #

新建一个名为_VendorListPartial.cshtml的部分视图，用来渲染供应商列表：

@model IEnumerable<Vendor>
@foreach (var vendor in Model) {
    <div class="vendor-item">
        @vendor.VendorCompanyName
    </div>
}

第三步：修改主视图 #

把原来的供应商列表容器改成空状态，初始提示用户选择分类：

<div class="half-left"> 
    @Html.DropDownListFor(x => x.subCatObj.SubCategory_Id, Model.GetAllSubCategory, "--Select--", new { @id = "subCategory", @class = "contactField" }) 
</div>

<div id="vendorList">
    <p>请选择一个分类查看供应商</p>
</div>

第四步：添加AJAX请求代码 #

$('#subCategory').on('change', function() {
    const selectedCategoryId = $(this).val();
    const vendorContainer = $('#vendorList');
    
    if (!selectedCategoryId) {
        vendorContainer.html('<p>请选择一个分类查看供应商</p>');
        return;
    }
    
    // 发送AJAX请求到后端接口
    $.ajax({
        url: '@Url.Action("GetVendorsByCategory", "YourControllerName")', // 替换成你的Controller名称
        type: 'GET',
        data: { subCategoryId: selectedCategoryId },
        success: function(result) {
            // 用返回的部分视图更新容器内容
            vendorContainer.html(result);
        },
        error: function() {
            vendorContainer.html('<p>加载供应商失败，请稍后重试</p>');
        }
    });
});

内容的提问来源于stack exchange，提问作者sumit.spider