ASP.NET Core无需JSON实现控制器传列表并联动下拉框

1. 控制器端实现（无需JSON传递） #

你可以让控制器直接返回HTML格式的下拉选项或者PartialView，避免JSON序列化。以下两种方式任选：

方式一：返回PartialView（推荐，更符合ASP.NET Core视图逻辑）

首先创建控制器方法，查询数据后返回渲染好的下拉框PartialView：

public IActionResult FindFinalProductCode(int productTitleId, int productTypeId, int sizeId)
{
    // 替换为你的业务逻辑：根据三个属性查询对应的最终产品列表
    var finalProducts = _dbContext.FinalProducts
        .Where(fp => fp.ProductTitleId == productTitleId 
                  && fp.ProductTypeId == productTypeId 
                  && fp.SizeId == sizeId)
        .ToList();

    // 转换为SelectListItem集合
    var selectItems = finalProducts.Select(fp => new SelectListItem
    {
        Value = fp.Id.ToString(),
        Text = fp.ProductName // 替换为你的显示字段
    });

    // 返回PartialView，传入选项集合
    return PartialView("_FinalProductDropdown", selectItems);
}

然后创建PartialView _FinalProductDropdown.cshtml：

@model IEnumerable<SelectListItem>

<select id="FinalProductId" name="FinalProductId" class="form-control">
    <option value="">请选择最终产品</option>
    @foreach (var item in Model)
    {
        <option value="@item.Value">@item.Text</option>
    }
</select>

方式二：直接返回HTML选项字符串

如果不想用PartialView，控制器可以直接拼接标签返回：

public IActionResult FindFinalProductCode(int productTitleId, int productTypeId, int sizeId)
{
    var finalProducts = _dbContext.FinalProducts
        .Where(fp => fp.ProductTitleId == productTitleId 
                  && fp.ProductTypeId == productTypeId 
                  && fp.SizeId == sizeId)
        .ToList();

    var optionBuilder = new StringBuilder();
    optionBuilder.Append("<option value=\"\">请选择最终产品</option>");
    foreach (var fp in finalProducts)
    {
        optionBuilder.AppendFormat("<option value=\"{0}\">{1}</option>", 
            fp.Id, fp.ProductName);
    }

    return Content(optionBuilder.ToString(), "text/html");
}

2. 前端Ajax修正（正确填充下拉框） #

原来的错误大概率是误用了不存在的items()方法，正确的做法是用html()方法替换下拉框的内容。同时要监听所有属性下拉框的变化事件：

// 监听三个属性下拉框的change事件
$('#ProductTitleId, #ProductTypeId, #SizeId').on('change', function() {
    // 获取当前选中值
    const titleId = $('#ProductTitleId').val();
    const typeId = $('#ProductTypeId').val();
    const sizeId = $('#SizeId').val();

    // 若任一属性未选择，清空最终产品下拉框
    if (!titleId || !typeId || !sizeId) {
        $('#FinalProductId').html('<option value="">请先选择完整属性</option>');
        return;
    }

    // 发起Ajax请求
    $.ajax({
        url: '/Order/FindFinalProductCode',
        type: 'GET',
        data: {
            productTitleId: titleId,
            productTypeId: typeId,
            sizeId: sizeId
        },
        success: function(result) {
            // 方式一（PartialView）：替换下拉框容器的内容
            $('#FinalProductIdContainer').html(result);
            
            // 方式二（直接返回选项）：替换下拉框内部的选项
            // $('#FinalProductId').html(result);
        },
        error: function() {
            $('#FinalProductId').html('<option value="">加载失败，请重试</option>');
        }
    });
});

3. 主视图调整 #

如果用PartialView方式，需要把最终产品下拉框放在一个容器里，方便替换：

<div id="FinalProductIdContainer">
    <select id="FinalProductId" name="FinalProductId" class="form-control">
        <option value="">请选择属性后加载</option>
    </select>
</div>

关键说明 #

• 避免JSON的核心是让控制器返回HTML而非序列化对象，前端直接复用返回的HTML片段即可。
• 不要使用不存在的items()方法，jQuery中更新下拉框选项用html()方法替换内部内容即可。
• 增加参数校验，避免在属性未选全时发起无效请求。

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