Asp.Net Core Razor Pages中datatables.net数据绑定失败排查

数据无法渲染是三个核心问题导致的：

• DataTables默认要求ajax接口返回的JSON必须包裹在data属性下，直接返回数组格式插件识别不到
• 前端代码存在语法错误：ajax配置行末尾多了一个冗余逗号，同时table标签结构不符合规范，表头没有放在<thead>标签内，插件无法正确识别列结构
• Razor Pages有专属路由规则，handler绑定的Get请求需要确保路径正确，POST请求则必须携带防伪令牌，否则会被框架拦截返回400

1. 调整后端接口返回结构 #

修改OnGetDisplay方法的返回值，按DataTables要求包装数据：

public IActionResult OnGetDisplay()
{
    return new JsonResult(new { data = _employee });
}

如果不想修改后端返回结构，也可以在前端ajax配置中增加dataSrc: ''，告诉插件直接读取返回的根数组即可，不过按官方规范包装返回值兼容性更好。

2. 修正前端页面代码 #

首先修正表格结构，将表头放入<thead>标签，新增空的<tbody>供插件填充渲染数据；其次修正js语法错误，规范ajax配置写法，完整代码如下：

@page
@model Razor_Harshit.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
}
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
    <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>    
    <script>
        $(document).ready(function () {
            $('#table1').DataTable({
                pageLength: 2,
                ajax: {
                    url: "?handler=Display",
                    type: "GET",
                    dataSrc: "data"
                },
                columns: [
                    { data: 'Name' },
                    { data: 'Email'},
                    { data: 'Gender' },
                    { data: 'Mobile' },
                    { data: 'City' }
                ]
            });
        });
    </script>
</head>
<body>
    <table id="table1" class="display" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Gender</th>
                <th>Mobile</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

• 你通过Nuget安装的datatables相关包不会自动引入静态资源到页面，当前用CDN引入css/js的方式可以正常运行，如果后续要使用本地静态资源，需要先开启UseStaticFiles中间件，再将包内的资源文件映射到项目wwwroot目录下
• 插件初始化推荐使用大写开头的.DataTable()方法，该方法返回DataTables原生实例，调用插件API更方便；小写开头的.dataTable()是兼容老版本的写法，返回jQuery对象
• 如果后续改用POST方式请求接口，必须在请求头中携带RequestVerificationToken，否则会被Razor Pages的防伪验证机制拦截

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