.NET Core中AJAX获取数据库列表显示<li>时出现undefined问题求助

嘿，我刚梳理了你的代码，发现问题大概率出在JSON序列化的命名规则差异上！ASP.NET Core默认会把C#里的PascalCase（首字母大写）属性序列化为JavaScript常用的camelCase（首字母小写），所以你后台返回的JSON数据里，属性名其实是personId、personName、personAddress，但你的JS代码里用的是item.PersonId这种大写开头的写法，自然就取不到值，显示undefined了。

下面给你两种解决思路，选哪种都可以：

思路1：修改JavaScript代码适配驼峰命名 #

直接把JS里的属性名改成小写开头，和返回的JSON字段对应上就行，这是最快捷的方法：

<script>
$.ajax({
    type: "GET",
    url: "/Person?handler=List",
    // GET请求不需要设置contentType（无请求体），可去掉该配置
    dataType: "json",
    success: function (response) {
        var dvItems= $("#dvItems");
        dvItems.empty();
        $.each(response, function (i, item) {
            // 注意这里的属性名改成小写开头，和序列化后的JSON字段匹配
            var $li = $('<li>').append(`${item.personId} with name ${item.personName} living in ${item.personAddress}`).appendTo(dvItems);
        });
    },
    error: function (response) { // jQuery AJAX的错误回调是error，不是failure
        alert("加载数据失败：" + response.statusText);
    }
});
</script>

顺带提个小细节：你原来写的failure是错误的，jQuery AJAX的错误回调应该用error，不然出错时不会触发提示，我已经顺手改过来了。

思路2：修改ASP.NET Core的JSON序列化规则，保持PascalCase #

如果你希望后台返回的JSON属性名和C#模型完全一致（首字母大写），可以在项目配置里调整序列化规则：

对于.NET 6+（Program.cs） #

在builder.Services.AddControllersWithViews()后添加配置：

builder.Services.AddControllersWithViews()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = null; // 禁用自动驼峰命名转换
    });

对于.NET 5及更早版本（Startup.cs） #

在ConfigureServices方法里修改：

services.AddControllersWithViews()
    .AddNewtonsoftJson(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver(); // 使用默认的PascalCase序列化
    });

修改后，后台返回的JSON属性名就是PersonId、PersonName，你的原JS代码就能正常工作了。

额外的代码优化建议 #

你的后台OnGetList方法可以简化，不需要手动循环添加元素，直接返回查询结果即可：

public JsonResult OnGetList() {
    var list = _context.Person.ToList();
    return new JsonResult(list);
}

这样调整后，应该就能正常显示Person列表啦！

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