.NET Razor Pages中DataTables无法加载Ajax JSON数据求助

核心问题1：后端JSON格式错误 #

手动拼接JSON字符串的方式会导致返回内容不是标准JSON对象，而是带引号的字符串，DataTables无法解析。

错误代码：

public JsonResult OnGetAllCustomers()
{
    List<Customer> lstCustomers = new List<Customer>();
    lstCustomers = objCustomerDAL.GetAllCustomers();
    var output = JsonConvert.SerializeObject(lstCustomers);
    return new JsonResult("\"data\":" + output);
}

修复代码：
直接返回包含data属性的匿名对象，由框架自动处理JSON序列化：

public JsonResult OnGetAllCustomers()
{
    var lstCustomers = objCustomerDAL.GetAllCustomers();
    return new JsonResult(new { data = lstCustomers });
}

核心问题2：字段大小写不匹配 #

DataTables对字段名称大小写敏感，后端返回大驼峰格式（如CompanyName），但前端配置的是小写（companyname），导致数据无法映射。

前端columns配置修复：

columns: [
    {
        className: 'dt-control',
        orderable: false,
        data: null,
        defaultContent: ''
    },
    { data: "CompanyName" },
    { data: "ContactName" },
    { data: "ContactTitle" },
    { data: "City" },
    { data: "State" }
],

问题3：行详情函数字段大小写不匹配 #

行详情里的字段要和后端返回的字段大小写保持一致：

function format(d) {
    return (
        '<dl>' +
        '<dt>Phone: </dt>' +
        '<dd>' +
        d.Phone +
        '</dd>' +
        '<dt>Email: </dt>' +
        '<dd>' +
        d.Email +
        '</dd>' +
        '<dt>Extra info:</dt>' +
        '<dd>And any further details here (images etc)...</dd>' +
        '</dl>'
    );
}

问题4：重复引入jQuery #

前端同时加载了本地和CDN的jQuery，可能引发冲突，保留一个即可：

<!-- 移除其中一个jQuery引用 -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.js"></script>

额外排查步骤 #

• 打开浏览器开发者工具（F12），查看Network标签下的请求响应，确认返回的是标准JSON格式（而非字符串）
• 查看Console标签，排查是否存在DataTables相关报错（如字段找不到、JSON解析错误等）

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