ASP.NET Core中Ajax success返回undefined、表格渲染异常如何修复

问题根因 #

• 你观察到返回JSON里带的$id、$values、$ref标识，是ASP.NET Core序列化器在手动开启保留对象引用处理循环引用模式下的特征输出（通常是之前配置了ReferenceHandler.Preserve）：
  • 集合类型的返回值会被嵌套在$values属性内，不是直接输出标准数组
  • 每个对象会被分配唯一$id，循环引用的位置会用$ref指向已存在的对象id
• 原有前端代码直接将整个返回JSON对象作为数组遍历，相当于把序列化生成的元数据属性也当成了表格行渲染，因此出现业务字段读出来全是undefined、生成大量无关空行的问题。

修复方案 #

优先方案：调整后端序列化配置，移除循环引用标识 #

这是最干净的修复路径，不会给前端留下额外兼容负担。修改项目启动类（Program.cs/.NET 6+ 或 Startup.cs/.NET 5及更早版本）中的序列化注册逻辑：

• 如果使用.NET Core默认的System.Text.Json序列化器：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        // 关闭保留引用模式，移除$id、$ref序列化标识
        options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.None;
        // 配置属性名为前端适配的驼峰命名，避免额外前端转换
        options.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;
    });

注意：如果实体本身存在导航属性形成的循环引用（比如订单关联用户、用户反向关联订单列表），不要靠序列化层的保留引用逻辑掩盖问题，直接在不需要返回的导航属性上添加[JsonIgnore]特性，从实体结构层面移除循环引用路径，保证输出的是无冗余的纯业务JSON。

• 如果项目使用Newtonsoft.Json作为序列化器，对应配置为：

builder.Services.AddControllers()
    .AddNewtonsoftJson(options =>
    {
        // 关闭循环引用保留
        options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
        // 移除$id、$ref标识输出
        options.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.None;
    });

调整完成后，后端返回的就是标准的数组结构，原有前端遍历逻辑不需要修改即可正常渲染。

兜底方案：前端兼容解析带包装的返回结构 #

如果因流程原因无法立即调整后端配置，可以在前端拿到Ajax返回值后先做结构解包，再做渲染：

1. 先判断返回对象是否存在$values属性，若存在则将$values对应的内容提取为真实业务数组；
2. 确认提取结果是纯数组后再执行遍历渲染，避免把序列化元数据当成业务行处理。
   修正前后端对比示例：

// 存在问题的原代码逻辑
$.ajax({
    url: '/YourController/GetTableData',
    success: function(res) {
        // 直接遍历整个返回对象，会把$id、$values等元数据也当成业务行
        $.each(res, function(index, item) {
            $('#dataTable tbody').append(
                `<tr><td>${item.userName}</td><td>${item.orderAmount}</td></tr>`
            )
        })
    }
})

// 兼容修正后的代码逻辑
$.ajax({
    url: '/YourController/GetTableData',
    success: function(res) {
        let actualDataList = res;
        // 解包带$values的序列化结构
        if (res.$values) {
            actualDataList = res.$values;
        }
        // 仅在确认是数组时执行渲染
        if (Array.isArray(actualDataList)) {
            $.each(actualDataList, function(index, item) {
                $('#dataTable tbody').append(
                    `<tr><td>${item.userName}</td><td>${item.orderAmount}</td></tr>`
                )
            })
        }
    }
})

额外注意：数组遍历不要使用for...in语法，该语法会遍历对象上所有可枚举属性，很容易把序列化产生的元数据属性也纳入遍历范围，是生成多余空行的常见诱因。优先使用普通下标的for循环、Array.forEach、jQuery的$.each方法遍历数组，这类方法只会读取数组的实际元素，不会误读无关属性。

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