ag-grid with web api

最新推荐文章于 2025-06-20 17:08:16 发布

aaa_dai

最新推荐文章于 2025-06-20 17:08:16 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： .NET/.NET CORE 文章标签： ag-grid web api

本文链接：https://blog.youkuaiyun.com/sgs595595/article/details/87818397

.NET/.NET CORE 专栏收录该内容

38 篇文章

订阅专栏

本文介绍ag-Grid，一款适用于多种前端框架的企业级表格控件。支持四种行模式：客户端模式、无限模式、服务器端模式及视口模式。涵盖webAPI应用、.NET Core框架及Oracle数据库交互等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ag-grid

ag-grid的定位是一个企业级别的前端表格控件.

支持的框架: 原生JavaScript, Angular, React,Vue.js.
行模式: 有4中行模式, 不同的模式支持不同的功能
1. Client-side(免费): 默认的模式, 网格将一次性将所有数据加载到网格中. 少于10K条记录时推荐使用.
  网格可以在内存中执行过滤，排序，分组，旋转和聚合。
2. Infinite(免费):
  1. 不用一次性将所有数据加载到界面, 提供过滤, 排序等API, 可以将界面的条件传到后端server中,从而分批次的加载数据.
  2. 默认提供的是下拉到最后一行, 触发一次查询, 通过增加额外分页条件, 可以实现server端分页, 下面项目的client page实现了服务端分页.
  3. 缺陷是不能进行服务端分组功能.
3. Server-side(收费): 服务器端行模型建立在Infinite上, 最大的区别是可以进行服务端分组. 下面的项目使用的也是这种模式.
  当用户向下滚动时，它也会延迟加载数据。此外，它允许通过服务器端分组和聚合来延迟加载分组数据。高级用户将使用服务器端行模型通过服务器端聚合执行临时切片和数据切片
4. Viewport(收费): 网格将告知服务器它正在显示的数据（第一行和最后一行），服务器将仅为这些行提供数据。如果您希望服务器确切知道用户正在查看的内容，请使用此选项，这对于非常大的实时数据流中的更新非常有用，其中服务器仅向查看受影响行的客户端发送更新
支持的功能: 不同的行模式具体提供的功能.

web api(asp.net web api)

web api: 可以简单的视作没有view层的MVC, 轻量级的WCF

构建REST-ful service, 支持http协议: request, post, put, delete…
可以创建完整的HTTP服务，只需返回数据, 像json, xml等,
不维护复杂的网页控件状态
完美的支持移动端访问
可以嵌合到web app中使用, 但是需要独立的api server及路由过滤

AgGrid-WebAPI Project

简单使用 ag-grid和web api. 运行框架: .net core 2.2

parameter(filterModels, sortModels…): Client(browser) => Server(.net core 2.2) => Oracle DB(procedure)

GitHub

项目源码: webAPI-AgGrid

Function

Infinite Mode: Pagination, Filter, Sort
Server Mode: Pagination, Filter, Sort, Group by

Application Context

Front End: Ag-grid + JavaScript
Server: Web API + ADO.Net(No EF)
DataBase: Oracle: procedure
显示大数据量,考虑到控件自身的功能丰富度和support, 前端使用ag-grid控件
容器化, 使用.net core 2.2框架
兼容移动端, 使用web api
为了更好的利用已有的存储过程, 未使用EF, 通过 ADO.Net获取数据库数据.

Project Intro

AgGridApi 网站程序项目

Config files
- launchSettings.json: 默认的程序启动配置文件
- dbsettings.json: 配置数据库连接字符串
- Startup.cs: 配置和注入服务

	//add mvc serv		
	services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
	//inject costumed instance
	//  Scoped objects are the same within a request but different across requests. 
	services.AddScoped<IDemo, Demo>();

Controller: DI+RESTful

    [Route("api/aggrid")]
    [ApiController]
    public class AgGridController : ControllerBase
    {
        private readonly IAGServer _aGServer;
        private readonly IRequestBuilder _requestBuilder;

        public AgGridController(IAGServer aGServer, IRequestBuilder requestBuilder)
        {
            _aGServer = aGServer;
            _requestBuilder = requestBuilder;
        }
	
        [HttpGet]
        [Route("GetDataColumns/{datasource}")]
        public Task<string> GetDataColumns(string datasource)
        {
            return Task.Run(() => _aGServer.GetDataColumns(datasource));
        }
        ...
     }

wwwroot: 前端文件

AgGridApi.Services 服务项目

定义接口及其实现类

在startup文件中完成注入services.AddScoped<IAGServer, AGServer>();.
在消费类的构造函数中添加接口类IDemo作为参数public AgGridController(IAGServer aGServer, IRequestBuilder requestBuilder),
.net core运行时作为一个容器, 在调用服务时自动注入AGServer实例
1. IAGServer.cs 接口类
2. AGServer.cs 结构实现类