.NET Core 6中Ajax级联下拉框切换产品后颜色选项不更新

核心问题点 #

• JS函数名大小写不匹配：JavaScript是大小写敏感语言，你调用的是小写开头的getColorByProduct()，但定义的函数是大写开头的GetColorByProduct()，导致触发下拉框切换事件时找不到对应函数。
• 后端接口名称不匹配：前端Ajax请求的Action是GetColorByProduct，但后端定义的方法名是GetProductByColor，路由无法匹配，请求无法到达正确接口。
• 视图数据绑定错误：控制器通过ViewBag.Product传递产品列表，但视图中循环的是未定义的lstProduct，未正确绑定ViewBag中的数据，可能导致产品下拉框初始化异常。
• 属性名称不匹配：后端返回的ProductItems对象包含color属性，但前端JS中错误使用item.colorId，需匹配实体类实际属性名。
• GET请求Json返回限制：.NET Core默认对GET请求返回Json有约束，需明确允许接口接收GET请求。

修正后的代码示例 #

控制器代码 #

// 传递产品列表到视图
ViewBag.Product = new SelectList(_context.Products, "ProductId", "ProductName");

// 修正接口名称，添加HttpGet标记明确允许GET请求
[HttpGet]
public JsonResult GetColorByProduct(int id)
{   
    // 筛选对应产品的颜色数据，仅返回必要字段减少冗余
    var colorData = _context.ProductItems
                        .Where(n => n.ProductId == id)
                        .Select(n => new { 
                            Value = n.ProductItemId, // 颜色对应标识
                            Text = n.Color // 颜色名称
                        })
                        .ToList();
    return Json(colorData);
}

视图代码 #

<td>
    <select name="" id="productList" class="ddlProductItemsId">
        <!-- 正确绑定ViewBag中的产品列表 -->
        @foreach (var item in ViewBag.Product as SelectList)
        {
            <option value="@item.Value">@item.Text</option>
        }
    </select>
</td>
<td>
    <select id="colorId"></select>
</td>

Ajax代码 #

$(document).ready(function () {
    getColorByProduct();
});

$("#productList").change(function () {
    getColorByProduct();
});

// 统一函数名大小写
function getColorByProduct() {
    $.ajax({
        url: '@Url.Action("GetColorByProduct", "Invoice")',
        type: 'GET',
        data: {
            id: $("#productList").val()
        },
        success: function (data) {
            $('#colorId').empty();
            // 添加默认提示选项
            $('#colorId').append('<option value="">请选择颜色</option>');
            $(data).each(function (index, item) {
                // 匹配后端返回的字段名
                $('#colorId').append('<option value="' + item.Value + '">' + item.Text + '</option>');
            });
        },
        // 添加错误回调，便于排查请求问题
        error: function(xhr, status, error) {
            console.log("请求错误：" + error);
            console.log("响应内容：" + xhr.responseText);
        }
    });
}

额外注意事项 #

• 确保ProductItems实体类的属性名与前端使用的字段完全匹配，比如实体中颜色属性是Color，则后端Select时对应Text = n.Color。
• 打开浏览器控制台（F12），查看Network标签页的请求状态，以及Console标签页的错误信息，可快速定位请求问题。

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