基于Asp.net WebForms的网格视图设计建议及开源JS网格推荐问询

针对你的ASP.NET WebForms项目需求，以下几个开源JS网格组件完全适配你的场景：

DataTables #

• 完全开源免费，生态成熟，文档完善
• 支持自定义任意列数（7列轻松配置），可通过初始化配置或动态添加允许空行
• 与WebForms后端集成便捷：点击保存按钮时，可通过API获取网格所有行数据（包括空行），用AJAX提交到后台标记[WebMethod]的静态方法完成数据库写入，之后调用ajax.reload()方法即可刷新网格展示最新数据
• 可搭配免费的行内编辑插件或自定义JS逻辑实现单元格编辑，满足输入需求

Grid.js #

• 轻量无依赖的纯JS网格，不会和WebForms现有控件产生冲突
• 支持动态添加空行、自定义列配置，适配7列需求
• 提交数据时可遍历网格行提取所有值，通过AJAX提交到WebForms的ASHX处理程序或WebMethod，完成数据库操作后重新加载数据源渲染网格
• 配置简单，学习成本低，适合老项目快速集成

Handsontable（社区版） #

• 开源社区版提供类似Excel的编辑体验，支持空行保留、自定义列数
• 内置API可一键导出所有网格数据（包括空行），方便提交到后台处理
• 和WebForms集成无压力：通过AJAX将JSON格式的行数据发送到后台，完成存储后调用网格的loadData()方法重新渲染数据
• 适合需要更灵活单元格编辑的场景

通用集成思路 #

在WebForms后台编写静态的[WebMethod]方法接收前端传来的JSON数据，处理数据库写入逻辑后返回更新后的数据集；前端通过网格组件的API获取所有行数据，用jQuery或原生JS发起AJAX请求，成功后调用网格的刷新方法完成渲染。

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