ASP.NET Core 5.0集成jsGrid时loadData返回数据无法渲染问题

前端排查点 #

• 确认loadData方法返回结构匹配配置：非分页场景直接返回数据数组，pageLoading: true的分页场景返回包含data（当前页数据）、itemsCount（总数据量）的对象。常见错误是直接返回完整ajax响应对象，未提取对应字段。
• 打印完整ajax响应体，确认后端返回的数组所属字段：ASP.NET Core默认用Ok()包装返回值时，数据会嵌套在value字段中，此时需提取response.value而非直接使用response，若你自定义了返回包装类则需对应调整字段名。
• 标准loadData写法参考：

$("#jsGrid").jsGrid({
    // 其余配置省略
    pageLoading: false, // 非分页模式
    controller: {
        loadData: function(filter) {
            return $.ajax({
                type: "POST",
                url: "/Management/Category",
                contentType: "application/json",
                data: JSON.stringify(filter)
            }).then(function(res) {
                // 非分页模式直接返回数据数组
                return res.value;
                // 分页模式改为 return { data: res.value.list, itemsCount: res.value.total }
            });
        }
    }
});

后端排查点 #

• 确认POST请求参数绑定正常：ASP.NET Core 5.0默认需给Action参数加[FromBody]特性接收JSON格式的请求体，否则会导致分页/筛选参数接收失败，返回空列表。
• 确认返回结构无多余嵌套：非分页场景可直接返回数据列表，分页场景需同时返回总条数，示例代码如下：

[ApiController]
[Route("[controller]")]
public class ManagementController : ControllerBase
{
    [HttpPost("Category")]
    public IActionResult GetCategory([FromBody] JsGridFilter filter)
    {
        var productList = _context.Products.ToList();
        // 非分页场景直接返回列表
        return Ok(productList);
        // 分页场景返回示例
        // var pagedList = productList.Skip(filter.pageIndex * filter.pageSize).Take(filter.pageSize).ToList();
        // return Ok(new { list = pagedList, total = productList.Count });
    }
}

// 接收参数的实体类定义
public class JsGridFilter
{
    public int pageIndex { get; set; }
    public int pageSize { get; set; }
    // 其余筛选字段按需添加
}

常见坑排查 #

• 若你设置了pageLoading: true但只返回了数据数组，jsGrid会识别不到数据导致渲染失败，必须严格返回包含data和itemsCount的对象。
• 确认POST请求的contentType设置为application/json，否则后端无法正常解析请求体参数。

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