如何通过Ajax从ASP.NET MVC控制器填充jqGrid并配置首行数据

我来帮你梳理下问题，看看怎么调整代码实现你的需求。从你给出的代码片段来看，Ajax请求有几个可以完善的地方，同时还要结合jqGrid的数据绑定逻辑来处理静态列。

第一步：修正Ajax请求，正确获取并处理数据 #

你原来的代码里contentType截断了，而且使用async: false（同步请求）并不推荐，会阻塞浏览器。改成异步请求，在success回调里处理返回的数据，再更新jqGrid：

function getCounts() {
    // 确保resourceId是有效的值
    if (!resourceId) {
        console.warn("resourceId未定义，请检查");
        return;
    }

    $.ajax({
        dataType: 'json',
        url: "/CapacityPlanning/getResouceCount2",
        data: JSON.stringify({ resource: resourceId, levelId: "Level-1" }),
        type: "POST",
        contentType: "application/json; charset=utf-8", // 补全编码设置
        success: function(statData) {
            // 构造jqGrid需要的数据源：首行首列为静态值，其余列用控制器返回的统计数
            let gridRow = {
                staticTitle: "统计汇总", // 这个字段对应jqGrid首列的name属性
                productCount: statData.productTotal, // 替换成控制器返回的实际字段名
                orderCount: statData.orderTotal,
                // 依此类推，对应你jqGrid里的每一列
            };

            // 更新jqGrid数据
            $("#yourGridId")
                .jqGrid('clearGridData') // 清空原有数据
                .jqGrid('setGridParam', { data: [gridRow] }) // 设置新数据
                .trigger('reloadGrid'); // 重新加载表格
        },
        error: function(xhr, status, err) {
            console.error("获取统计数据失败：", err);
            alert("加载统计数据出错，请稍后重试");
        }
    });
}

第二步：配置jqGrid的列模型，对应静态列和数据列 #

确保你的jqGrid初始化时，列模型（colModel）里的name和上面构造的gridRow字段一一对应，首列设置为不可编辑的静态列：

$(document).ready(function() {
    $("#yourGridId").jqGrid({
        colModel: [
            { 
                name: 'staticTitle', 
                label: '统计类别', 
                width: 160, 
                editable: false, // 设为不可编辑
                align: 'left' 
            },
            { 
                name: 'productCount', 
                label: '产品总数', 
                width: 140, 
                align: 'right', 
                formatter: 'integer' // 如果是数字，用整数格式化
            },
            { 
                name: 'orderCount', 
                label: '订单总数', 
                width: 140, 
                align: 'right', 
                formatter: 'integer'
            },
            // 其他统计列的配置
        ],
        datatype: 'local', // 因为我们用本地数据更新
        rowNum: 1, // 只显示一行数据
        autowidth: true,
        viewrecords: false,
        caption: '资源统计'
    });

    // 页面加载完成后调用获取数据的方法
    getCounts();
});

第三步：确保ASP.NET MVC控制器返回正确的JSON #

你的getResouceCount2控制器方法要返回结构正确的JSON对象，比如：

[HttpPost]
public ActionResult getResouceCount2(string resource, string levelId)
{
    // 这里写你的统计逻辑，从数据库或其他地方获取数值
    var result = new {
        productTotal = 125, // 示例数值
        orderTotal = 340
        // 其他统计字段
    };

    // MVC 5及以下需要加JsonRequestBehavior.AllowGet，Core版本不需要
    return Json(result);
}

几个关键注意点 #

• 字段名匹配：控制器返回的JSON字段名，要和jqGridcolModel里的name、以及前端构造的gridRow字段完全一致，否则数据无法正确绑定
• resourceId有效性：确保resourceId变量在调用getCounts()之前已经被正确赋值，避免传空参数导致控制器返回错误
• 避免同步请求：不要再用async: false，同步请求会让浏览器在等待响应时卡住，严重影响用户体验
• 调试技巧：可以在浏览器控制台里查看Ajax请求的响应，确认控制器是否返回了预期的JSON数据，排查数据格式问题

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