ASP.NET MVC视图中Web API分页结果无法绑定jQuery DataTables排查

1. GET请求下Request.Form读取不到值导致响应异常 #

你的控制器在处理AJAX请求时，尝试通过Request.Form["draw"]获取参数，但前端用的是GET请求，Request.Form只能读取POST请求的表单数据，因此draw字段会返回null。虽然你设置了serverSide: false，但返回的响应结构包含draw字段，DataTables可能因该字段异常拒绝渲染数据。

解决办法：
如果不需要服务器端分页（serverSide: false），控制器无需返回draw、recordsTotal等字段，直接返回数据数组即可：

if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
{
    // 直接返回数据数组，适配客户端分页场景
    return Json(countryData.Items);
}

同时前端AJAX配置可简化dataSrc（甚至省略，因为响应直接是数组）：

ajax: {
    url: '@Url.Action("Index", "Country")',
    type: 'GET'
},

2. 服务器端分页与客户端分页的配置冲突 #

如果你的需求是服务器端分页（由API处理分页、搜索逻辑），则需要调整前端和控制器的配置：

• 前端开启serverSide: true，DataTables会自动传递draw、start、length等标准参数，你需要将这些参数转换为API所需的page和pageSize
• 控制器中获取draw参数时，因是GET请求，需用Request.Query["draw"]而非Request.Form["draw"]

修正后的控制器代码（服务器端分页场景）：

public async Task<IActionResult> Index()
{
    // 从QueryString获取DataTables标准参数
    int draw = int.TryParse(Request.Query["draw"], out var d) ? d : 1;
    int start = int.TryParse(Request.Query["start"], out var s) ? s : 0;
    int length = int.TryParse(Request.Query["length"], out var l) ? l : 10;
    string search = Request.Query["search[value]"].FirstOrDefault() ?? "";
    string category = Request.Query["category"].FirstOrDefault() ?? "";

    // 转换为API需要的分页参数
    int page = start / length + 1;
    int pageSize = length;

    var query = $"?page={page}&pageSize={pageSize}&search={search}&category={category}";
    var url = string.Format("{0}Country/", _baseUrl);
    var countryData = new CountryResponse();

    using (var httpClient = new HttpClient())
    {
        using (var response = await httpClient.GetAsync(url + query))
        {
            if (response.IsSuccessStatusCode)
            {
                var json = await response.Content.ReadAsStringAsync();
                countryData = JsonConvert.DeserializeObject<CountryResponse>(json);

                if (countryData is null)
                    return NotFound();

                if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
                {
                    return Json(new
                    {
                        draw = draw,
                        recordsTotal = countryData.TotalItemsCount,
                        recordsFiltered = countryData.TotalItemsCount, // 若API支持过滤，此处需改为过滤后的总数
                        data = countryData.Items
                    });
                }
                return View(countryData);
            }
        }
    }
    return View(countryData);
}

修正后的前端代码（服务器端分页场景）：

$(document).ready(function () {
    $('#countriesTable').DataTable({
        processing: true,
        serverSide: true, // 开启服务器端分页
        ajax: {
            url: '@Url.Action("Index", "Country")',
            type: 'GET'
        },
        columns: [
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1; // 服务器端分页时的序号计算
                }
            },
            { data: 'Id' },
            { data: 'CountryName' },
            { data: 'ISO2' },
            { data: 'ISO3' }
        ]
    });
});

3. 确认JSON字段与前端列名的大小写匹配 #

检查CountryResponse.Items的属性名，确保JSON序列化后的字段名与前端columns中的data值完全一致：

• 若C#属性是public int Id { get; set; }，默认序列化后JSON字段为"Id"，前端{ data: 'Id' }匹配；
• 若项目配置了驼峰命名序列化（如使用CamelCasePropertyNamesContractResolver），JSON字段会变成"id"，前端需改为{ data: 'id' }。

可通过浏览器开发者工具的Network面板查看AJAX响应内容，确认字段名是否匹配。

4. 检查视图中的表格结构 #

确保HTML表格的列数与DataTables配置的columns数量一致，表头<th>数量正确，示例结构：

<table id="countriesTable" class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>ID</th>
            <th>国家名称</th>
            <th>ISO2</th>
            <th>ISO3</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

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