ASP.NET Core MVC级联下拉框JS数据字段未定义问题求助

问题根源 #

你的代码存在三个核心问题，导致车型下拉框无法正常渲染：

1. JSON结构不匹配：控制器返回的是嵌套结构{ data: [车型数组] }，但前端直接尝试访问data[i]，实际应该读取data.data
2. 字段大小写不匹配：后端返回的字段名是Text和Value（首字母大写），但前端用小写的text/value读取，导致undefined
3. 循环硬编码长度：for循环写死了固定3次，无法适配不同品牌的车型数量

修正后的JavaScript代码 #

直接替换原有脚本部分即可：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $(function(){
        $('#drpBrand').change(function(){
            var brandId = $(this).val();
            var modelDropdown = $('#drpModel');

            // 未选择品牌时重置下拉框
            if(!brandId){
                modelDropdown.empty();
                modelDropdown.append("<option value=''>--Select Model--</option>");
                return;
            }

            $.ajax({
                url: '/Admin/Vehicle/GetModelsJson',
                data: {p : brandId},
                type: "GET", // 推荐用GET获取数据，需配合控制器添加[HttpGet]
                dataType: "json",
                success: function(response){
                    modelDropdown.empty();
                    // 重新添加默认选项
                    modelDropdown.append("<option value=''>--Select Model--</option>");
                    // 遍历后端返回的车型数组（response.data）
                    $.each(response.data, function(index, model){
                        // 匹配后端的字段名Text/Value
                        modelDropdown.append(`<option value="${model.Value}">${model.Text}</option>`);
                    });
                },
                error: function(xhr, status, error){
                    console.error('加载车型失败:', error);
                    modelDropdown.empty();
                    modelDropdown.append("<option value=''>加载失败，请重试</option>");
                }
            });
        });
    });
</script>

控制器配套修改（可选但推荐） #

将接口改为GET请求（更符合数据获取的REST规范），在方法上添加[HttpGet]特性：

[HttpGet]
public JsonResult GetModelsJson(int p)
{
    var models = (from x in GetModels() 
                  join y in GetBrands() on x.BrandId equals y.Id 
                  where x.BrandId == p
                  select new
                  {
                      Text = x.Name,
                      Value = x.Id.ToString()
                  }).ToList();
    return new JsonResult(new { data = models });
}

关键修改说明 #

• 访问response.data获取真正的车型数组，不再直接操作外层响应对象
• 使用model.Text和model.Value严格匹配后端返回的字段名
• 用$.each动态遍历所有车型，替代硬编码的for循环
• 添加了未选择品牌的重置逻辑和请求失败的错误处理
• 用模板字符串简化HTML拼接，提升代码可读性

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