ASP.NET Core 6 Razor视图实现产品-尺寸-颜色联动下拉框方案

1. 优化Razor视图代码 #

先调整前端下拉框结构，给每个下拉框添加ID方便JS操作，初始状态显示提示选项避免报错：

@{
    IEnumerable<ProductItem> lstProduct = ViewBag.ListProduct as IEnumerable<ProductItem>;
}

<select class="ddlProduct" id="ddlProduct" name="ddlProduct">
    <option value="">请选择产品</option>
    @foreach (var item in lstProduct)
    {
        <option value="@item.ProductItemsId">@item.Product.ProductName</option>
    }
</select>

<select class="ddlSize" id="ddlSize" name="ddlSize">
    <option value="">请先选择产品</option>
</select>

<select class="ddlColor" id="ddlColor" name="ddlColor">
    <option value="">请先选择产品</option>
</select>

2. 后端添加数据接口 #

在对应控制器中新增两个接口，用于根据ProductItemsId获取关联的尺寸和颜色数据，返回JSON格式：

// 获取指定产品的尺寸列表
[HttpGet]
public JsonResult GetSizesByProductId(int productItemId)
{
    // 实际项目中建议从数据库查询，这里用你的数据源示例
    var sizes = lstSize.Where(n => n.ProductItemsId == productItemId)
                       .Select(s => new { Value = s.SizeId, Text = s.Size.SizeName })
                       .ToList();
    return Json(sizes);
}

// 获取指定产品的颜色列表
[HttpGet]
public JsonResult GetColorsByProductId(int productItemId)
{
    var colors = lstColor.Where(n => n.ProductItemsId == productItemId)
                         .Select(c => new { Value = c.ColorId, Text = c.Colors.ColorName })
                         .ToList();
    return Json(colors);
}

提示：如果是.NET Core及以上版本，直接用[HttpGet]特性即可，无需额外配置允许GET请求的JSON返回。

3. 前端JS实现联动逻辑 #

用jQuery监听产品下拉框的change事件，通过AJAX请求后端接口更新尺寸和颜色选项：

$(document).ready(function() {
    $('#ddlProduct').on('change', function() {
        const productItemId = $(this).val();
        
        // 未选择产品时重置下拉框
        if (!productItemId) {
            $('#ddlSize').html('<option value="">请先选择产品</option>');
            $('#ddlColor').html('<option value="">请先选择产品</option>');
            return;
        }

        // 加载尺寸数据
        $.get('@Url.Action("GetSizesByProductId", "YourController")', { productItemId }, function(data) {
            let options = '<option value="">请选择尺寸</option>';
            data.forEach(item => {
                options += `<option value="${item.Value}">${item.Text}</option>`;
            });
            $('#ddlSize').html(options);
        }).fail(() => {
            $('#ddlSize').html('<option value="">加载尺寸失败</option>');
        });

        // 加载颜色数据
        $.get('@Url.Action("GetColorsByProductId", "YourController")', { productItemId }, function(data) {
            let options = '<option value="">请选择颜色</option>';
            data.forEach(item => {
                options += `<option value="${item.Value}">${item.Text}</option>`;
            });
            $('#ddlColor').html(options);
        }).fail(() => {
            $('#ddlColor').html('<option value="">加载颜色失败</option>');
        });
    });

    // 如果需要默认选中产品并加载数据，可添加以下代码
    // $('#ddlProduct').trigger('change');
});

提示：记得把YourController替换成你实际的控制器名称；如果不用jQuery，用原生fetch API也能实现，逻辑完全一致。

关键注意点 #

• 确保后端接口路由正确，参数名称和前端传递的productItemId一致。
• 返回的JSON字段要和前端JS中使用的item.Value、item.Text对应，避免字段名不匹配导致渲染失败。
• 生产环境中建议添加异常处理，避免接口报错导致页面无响应。

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