ASP.NET MVC中Controller未返回Ajax响应，级联下拉失效

核心问题分析 #

从代码来看，导致Ajax无法进入成功回调的主要原因有以下几点：

1. Controller返回Json的语法错误 #

GetCity方法返回Json的写法错误，把JsonRequestBehavior.AllowGet放到了匿名对象里，导致返回的不是合法JSON格式，jQuery解析失败触发错误回调。

错误代码：

return Json(new {data, JsonRequestBehavior.AllowGet });

2. View中条件判断的逻辑错误 #

判断州选择的条件用了按位或|，应该用逻辑或||，且当前条件永远为真，会导致选择默认选项时也发送请求，甚至可能因为state为null引发服务器错误。另外还存在拼写错误："Selet State"应为"Select State"。

错误代码：

if (stateSelected != 'Selet State' | stateSelected != '')

3. Controller未处理空引用异常 #

如果传入的stateSelected在数据库中找不到对应的State，state会是null，访问state.stateId会抛出空引用异常，导致请求返回500内部服务器错误。

修复步骤 #

步骤1：修正Controller的Json返回写法 #

将Json方法的第二个参数正确设置为JsonRequestBehavior.AllowGet，同时添加空引用判断避免报错：

[HttpPost]
public JsonResult GetCity(string stateSelected)
{
    using (Db db = new Db())
    {
        State state = db.States.Where(x => x.stateName == stateSelected).FirstOrDefault();
        
        // 处理state为空的情况，避免空引用异常
        if (state == null)
        {
            return Json(new List<City>(), JsonRequestBehavior.AllowGet);
        }

        int id = state.stateId;
        List<City> data = db.Cities.Where(x => x.stateId == id).ToList();

        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

步骤2：修正View中的条件判断和Ajax配置 #

• 把按位或|改成逻辑或||，统一"Select State"的拼写
• 添加dataType: 'json'明确指定返回格式，确保jQuery正确解析
• 优化城市下拉列表的更新逻辑：

$('#state').change(function () {
    var stateSelected = $('#state').children("option:selected").text();
    // 修正拼写错误和逻辑运算符
    if (stateSelected !== 'Select State' && stateSelected !== '') {
        $.ajax({
            type: 'POST',
            url: "/Home/GetCity",
            data: { stateSelected: stateSelected },
            dataType: 'json', // 明确指定返回JSON格式
            success: function (data) {
                alert("Working");
                // 清空城市下拉并重新填充选项
                $('#cityList').empty();
                $('#cityList').append("<option value='0'>Select City</option>");
                if (data && data.length > 0) {
                    $.each(data, function (i, item) {
                        $('#cityList').append(new Option(item.cityName, item.cityId));
                    });
                }
            },
            error: function (xhr, status, error) {
                // 打印错误详情方便调试
                console.log("错误状态：" + status);
                console.log("错误信息：" + error);
                console.log("响应内容：" + xhr.responseText);
                alert("Failed");
            }
        });
    }
});

步骤3：统一默认选项的拼写 #

把View中所有的"Selet State"改成"Select State"，避免判断时因为拼写不匹配出错：

// 国家改变时添加的默认选项
$('#state').append("<option value='0'>Select State</option>");

额外调试建议 #

如果问题仍存在，打开浏览器开发者工具（F12），在网络标签下查看：

• 请求状态码：若为500，说明服务器端报错，查看响应内容的异常信息
• 请求参数：确认stateSelected的值是否正确传递到服务器
• 响应内容：检查返回的JSON是否合法，有无语法错误

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