ASP.NET MVC .Net5/.Net Core实现GridView的最优方法及2021/2022年推荐插件

Web Form 中的 GridView 核心是自带数据绑定、分页、排序、行操作的可交互表格组件，.NET Core 与 ASP.NET MVC 框架没有内置的同类服务端控件，你可以通过第三方前端插件配合后端接口的方式实现同等功能，目前主流插件都同时支持客户端模式和服务端模式，两种模式的选择完全取决于你的业务场景：数据量小选客户端模式操作更流畅，数据量大选服务端模式性能更优。

2021-2022年主流优质实现方案 #

• jQuery DataTables
  生态最成熟的jQuery表格插件，完全覆盖GridView的所有基础功能，同时支持客户端/服务端两种渲染、搜索、分页逻辑，和.NET后端对接成本极低，后端只需要按照约定格式返回JSON数据即可。
  基础对接示例：
  后端接口代码：

  public IActionResult GetGridData()
  {
      var list = _context.Products.Select(p => new 
      {
          p.Id,
          p.Name,
          p.Price,
          p.CreateTime
      }).ToList();
      return Json(new { data = list });
  }
  

  前端初始化代码：

  $('#productGrid').DataTable({
      ajax: '/Product/GetGridData',
      columns: [
          { data: 'Id' },
          { data: 'Name' },
          { data: 'Price' },
          { data: 'CreateTime' }
      ]
  });
  

• Bootstrap Table
  基于Bootstrap样式体系的轻量表格插件，不需要额外适配样式就能和现有Bootstrap项目完美融合，支持自定义操作列、搜索过滤、分页、行内编辑，上手门槛比jQuery DataTables更低，适合中小型项目使用。
• DevExtreme Data Grid
  功能最全面的商用表格组件，原生支持.NET Core后端数据绑定，除了基础的分页排序功能外，还支持嵌套表格、批量编辑、虚拟滚动、Excel/PDF导出等高级功能，不需要大量自定义开发就能满足复杂的企业级需求。
• 自研Razor服务端渲染表格
  如果不想引入第三方前端依赖，你可以自己用Razor语法实现表格渲染，配合X.PagedList类库实现服务端分页、排序逻辑，仅需要在后端接收页码、排序字段、搜索关键词三个参数，查询数据后直接绑定到视图的<table>元素即可，适合功能需求非常简单的项目。

选型参考建议 #

• 单表数据量小于1000条时，优先选择客户端模式，前端一次性加载全量数据，所有操作不需要请求后端，用户体验更好
• 单表数据量大于1万条时，必须选择服务端模式，分页、搜索、排序逻辑全部在服务端执行，避免前端加载大量数据造成页面卡顿
• 有复杂行编辑、批量操作、多格式导出需求的项目，优先选择成熟的商用表格组件，能大幅降低开发成本

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