ASP.NET Core 5 MVC中jQuery Ajax调用Datatables无数据渲染问题求助

问题原因及修复方案 #

1. 核心错误点 #

• 定义的getAllMessages()函数没有触发执行，页面加载后不会自动初始化Datatables
• JS中重复声明了columns配置，前一份声明会被覆盖，属于无效冗余代码
• 控制器返回的JSON结构和Datatables的dataSrc配置不匹配：你控制器返回{data: 数据数组}，但dataSrc设为空字符串会让Datatables直接把整个响应体当数组解析，自然找不到数据
• ASP.NET Core默认使用System.Text.Json序列化时会自动将属性名转为驼峰格式，C#模型中的Id、ItemName等PascalCase属性，返回前端后会变成id、itemName等驼峰格式，JS中配置的data字段名大小写不匹配就会读不到值

2. 修复后的代码 #

修正items03.js

function getAllMessages() {
  $('#myTable').DataTable({
    processing: true,
    serverSide: false,
    ordering: true,
    paging: true,
    searching: true,
    columns: [
      { data: "id" }, // 对应序列化后的驼峰字段名
      { data: "itemName" },
      { data: "borrower" },
      { data: "lender" },
      {
        data: null,
        defaultContent: "<button class='tblview'>View Id</button><button class='tblDelete'>Delete</button>"
      }
    ],
    ajax: {
      "url": "/Item/GetItems",
      "type": "GET",
      "dataSrc": "data" // 对应控制器返回的data字段
    },
    "columnDefs": [
      {
        "targets": 0,
        "visible": false
      }
    ]
  });
}

// 页面加载完成后执行初始化
$(function(){
    getAllMessages();
})

可选：保留PascalCase属性名配置

如果不想改JS里的字段名，可以在Program.cs（或Startup.cs）中配置JSON序列化保留PascalCase：

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

改完之后JS里的data字段就可以继续写"Id"、"ItemName"。

3. 其他优化建议 #

视图中重复引入了jQuery，如果你的布局页(_Layout.cshtml)已经在底部引入过jQuery，重复引入会导致Datatables挂载失效，建议检查后删除重复的jQuery引用。

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