能否在ASP.Net MVC应用中使用Ag-Grid JS版本？求方案及报错修复

当然可以在ASP.NET MVC里用ag-Grid的JavaScript版本！我帮你梳理下正确的配置方法，顺便解决你遇到的那个报错问题。

一、先解决你碰到的报错问题 #

你遇到的Uncaught TypeError: Cannot read property 'match' of undefined，大概率是主题样式未正确引入或者初始化时主题名称配置错误导致的。ag-Grid依赖对应的主题CSS来正常渲染，缺少或不匹配的话就会触发这类属性读取失败的错误。

二、具体实现步骤 #

1. 引入ag-Grid的资源文件 #

有两种便捷方式可以引入：

• 本地文件方式：从ag-Grid官网下载JS和CSS包，解压后把ag-grid.min.js、ag-grid-community.min.js（社区版）和对应主题CSS（比如ag-theme-alpine.min.css）分别放到MVC项目的Scripts和Content文件夹中。
• CDN方式：直接在视图的<head>里添加CDN链接，不用下载文件更省心：

<!-- ag-Grid 主题样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.min.css">
<!-- ag-Grid 核心JS -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>

2. 在MVC视图中准备网格容器 #

在你的.cshtml视图里添加一个用于渲染ag-Grid的DOM元素，这里的class名称必须和你引入的主题完全匹配，这是很多人踩坑的点：

<div id="myGrid" style="height: 500px; width: 100%;" class="ag-theme-alpine"></div>

3. 编写初始化ag-Grid的JavaScript代码 #

在视图的<script>标签里添加初始化代码，配置列定义和数据源：

// 确保DOM加载完成后再初始化网格
document.addEventListener('DOMContentLoaded', function() {
    // 定义列结构
    const columnDefs = [
        { field: 'make', headerName: '汽车品牌' },
        { field: 'model', headerName: '车型' },
        { field: 'price', headerName: '价格', sortable: true }
    ];

    // 示例数据源
    const rowData = [
        { make: '丰田', model: '凯美瑞', price: 220000 },
        { make: '福特', model: '蒙迪欧', price: 190000 },
        { make: '保时捷', model: '718', price: 650000 }
    ];

    // 网格配置项
    const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        // 可选：开启排序、筛选功能
        sortable: true,
        filter: true
    };

    // 获取容器元素并初始化ag-Grid
    const gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

4. 验证控制器与路由 #

确保你的控制器能正常返回对应的视图，比如：

public class HomeController : Controller
{
    public ActionResult AgGridDemo()
    {
        return View();
    }
}

三、额外排查小贴士 #

• 如果还是出现主题相关报错：检查主题CSS是否正确引入，容器的class名称和主题名称完全一致（比如不要引入ag-theme-alpine的CSS，却给容器加ag-theme-material的class）。
• 如果网格不显示：检查容器是否设置了明确的高度（ag-Grid需要固定高度才能渲染），或者JS代码是否在DOM加载完成后执行（用DOMContentLoaded确保元素已存在）。

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