ASP.NET Core级联下拉(Cascade Dropdown)子选项显示undefined问题求助

根因分析 #

• 核心原因：JSON序列化属性名大小写不匹配
  ASP.NET Core 3.0及以上版本默认使用的系统文本JSON序列化器，会自动将C#匿名类的帕斯卡命名（首字母大写）属性转换为驼峰命名（首字母小写）输出，你后端实际返回的JSON结构为：

[{"activitySubTypeId":1,"activitySubTypeName":"测试子类型"},...]

但前端JS代码中读取的是row.ActivitySubTypeId、row.ActivitySubTypeName，属性名首字母为大写，自然无法读取到对应值，最终显示undefined。

• 潜在次要问题

1. 后端Action将下拉选项存入ViewData["ActivityTypeId"]，前端视图却使用ViewBag.ActivityTypeId读取，虽然二者底层数据互通，但存在类型转换失败的风险
2. $.get请求路径写死为GetActivitySubType，如果当前页面不在控制器根路径下，会出现404错误导致数据加载失败

解决方案 #

方案1：修改前端JS属性名（改造成本最低） #

直接将JS遍历取值的部分修改为匹配后端返回的驼峰属性名即可：

$.each(data, function (index, row) {
    $("#ActivitySubTypeId").append("<option value='" + row.activitySubTypeId + "'>" + row.activitySubTypeName + "</option>")
});

方案2：后端关闭JSON驼峰转换规则 #

如果希望前后端属性名保持一致，可以修改Program.cs（.NET 6+）的控制器注册配置：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

补充优化建议 #

1. 视图下拉绑定统一数据源，避免ViewData/ViewBag混用异常：

<select asp-for="ActivityTypeId" asp-items="ViewData["ActivityTypeId"] as SelectList"><option value="">Select</option></select>

2. JS请求路径用Url.Action动态生成，避免相对路径错误：

$.get('@Url.Action("GetActivitySubType")', { typeId: $("#ActivityTypeId").val() }, function (data) {
    // 原有业务逻辑
})

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