Entity Framework下AJAX加载联动州列表返回500错误如何解决

核心错误原因 #

• 服务端直接返回EF实体对象触发JSON序列化循环引用报错：你的state实体包含关联的country导航属性，country实体又包含states集合导航属性，JSON序列化时会进入无限循环，导致服务端抛出500错误。
• 前端DOM选择器写错：@Html.DropDownListFor(model => model.state.stateid)生成的下拉框ID为state_stateid，你使用的$("#state.stateid")是匹配类名为stateid的<state>标签，完全无法选中目标元素。
• 服务端返回的字段与前端取值不匹配：你直接返回state实体列表，前端却在取Value和Text属性，而state实体的主键和名称字段是stateid和statename。

修复代码 #

1 修正HomeController中的GetStateBaseOnCountry方法 #

[HttpPost]
public JsonResult GetStateBaseOnCountry(int countryId)
{
    // 转成匿名类返回，避免循环引用，同时返回前端需要的value和text字段
    var lstState = _testMvEntities.states
        .Where(x => x.countryid == countryId)
        .Select(x => new 
        {
            Value = x.stateid.ToString(),
            Text = x.statename
        })
        .ToList();
    return Json(lstState);
}

2 修正Create.cshtml中的JS代码 #

只需要修改选择器部分即可，其他逻辑可以保留：

// 把原来的 $("#state.stateid") 全部替换为 $("#state_stateid")
// 修正后的success代码块：
success: function (data) {
    var states = "<option value='0'>Select State</option>";
    for (var x = 0; x < data.length; x++) {
        states += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
    }
    $("#state_stateid").html(states).show();
}

可选优化 #

如果后续还需要返回EF实体，可以在全局配置中关闭循环引用检测，以ASP.NET MVC为例，在Global.asax.cs的Application_Start方法中添加：

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

内容的提问来源于stack exchange，提问作者R.D Student