将 jqGrid 行数据从视图提交到控制器 - 什么方法？

Question

我一直致力于使用来自this question 的一般想法和来自jqGrid Wiki 的cmets 的一些代码将jqGrid 中的所有行提交到一个操作方法。本质上，在提交时，我希望所有行数据都返回到控制器，以便我可以持久保存它。我尝试使用隐藏字段来存储所有行数据，但控制器似乎从来没有得到所有东西，只有网格中最后一个编辑的单元格。所以我改用 ajax 方法，但无论我尝试了什么，我都无法将 ajax POST 视为 JSON。这是我现在拥有的：

$("#submitButton").click(function () {
    $("#awesomeGrid").jqGrid('resetSelection');
    var gridRows = $("#awesomeGrid").jqGrid('getRowData');
    var rowData = new Array();
    for (var i = 0; i < gridRows.length; i++) {
        var row = gridRows[i];
        rowData.push($.param(row));
    }
    var dataToSend = JSON.stringify(rowData);
    $.ajax({
        url: '@Url.Action("UpdateAwesomeGridData")',
        type: 'POST',
        data: { gridData: dataToSend },
        dataType: 'json',
        success: function (result) {
            alert('success');
        }
    });
    return true;
});

还有我的控制器方法签名：

[HttpPost]
public ActionResult UpdateAwesomeGridData(string gridData)

我尝试将gridData 参数从string 更改为string[] 再更改为object[] 各种东西，但似乎没有任何效果。如果我将其保留为string，我会得到数据，但格式很古怪，就像这样（替换列名）：

gridData=["Id=1&Field1=1945&Field2=0&Field3=0&Field4=1&Field5=Some+string+value&Field6=&Field7=&Field8=&Field9s=","Id=2&Field1=1945&Field2=0&Field3=0&Field4=2&Field5=Another+string+value&Field6=&Field7=&Field8=&Field9s=","Id=3&Field1=1945&Field2=0&Field3=0&Field4=3&Field5=Yet+another+string&Field6=&Field7=&Field8=&Field9s=","Id=4&Field1=1945&Field2=0&Field3=0&Field4=4&Field5=Final+string&Field6=&Field7=&Field8=&Field9s="]

我从 Fiddler 中得到了这个，为了记录，当我摆弄它时，JSON 选项卡没有显示任何请求。有没有办法可以 JSON 化这个数组并在一次调用中发送它？我的操作方法中的参数是什么类型？

编辑 - 解决方案

对于其他像我一样愚蠢的人，我是这样工作的：

首先，根据 Oleg 的建议，我将 loadonce: true 添加到 jqGrid 定义中。然后，将我的提交按钮功能更改如下：

$("#submitButton").click(function () {
    var griddata = $("#awesomeGrid").jqGrid('getGridParam', 'data');
    var dataToSend = JSON.stringify(griddata);
    $.ajax({
        url: '@Url.Action("UpdateAwesomeGridData")',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: dataToSend,
        dataType: 'json',
        success: function (result) {
            alert('success: ' + result.result);
        }
    });
    return true;
});

然后，更改我的控制器方法签名：

public ActionResult UpdateAwesomeGridData(IEnumerable<GridBoundViewModel> gridData)

希望这对将来的某人有所帮助。

Answer 1

我看到你有很多问题。

第一个问题是您使用$.param(row) 并用编码（？？？！！！）数据填充数组rowData。我认为正确的代码应该包含从getRowData:data: { gridData: gridRows } 返回的数据的直接发布。在服务器端，您可以使用UpdateAwesomeGridData(string gridData)，然后将gridData 转换为List<List<string>>，例如

JavaScriptSerializer serializer = new JavaScriptSerializer();
var myListOfData = serializer.Deserialize<List<List<string>>>(gridData);

我想退一步问一个问题：为什么需要将数据发送到它已经拥有的服务器？如果出于某种目的需要网格中的所有数据，您可以使用生成数据的控制器的相同操作，这样您将在服务器上拥有相同的数据。

仅在一种情况下需要向服务器发送数据：您使用了loadonce: true，本地修改了数据，并且在修改结束时，您需要将所有更改的数据发送到服务器。在这种情况下，getRowData 的使用不是最佳选择，因为它只能从当前页面获取数据。要获取所有数据，您最好使用getGridParam("data")。

Answer 2

我看到 Oleg 已经回答了你的问题，我不想覆盖它，但是我想在这里分享我的想法。我认为将数据作为对象传递给 MVC 控制器比仅仅传递字符串更有意义，然后你可以将该对象传递给你的 DAO 类。

这是我的 jQuery 代码（显然感谢 Oleg 的代码）。

        var ruledetail = new Array();
        var grid = $('#RuleCriteria')[0], rows = grid.rows,
                    cRows = rows.length, iRow, iCol;


        var fromvalue;

        for (iRow = 0; iRow < cRows; iRow++) {
            row = rows[iRow]; // row.id is the rowid
            if ($(row).hasClass("jqgrow")) {
                cellsOfRow = row.cells;

                //build rule detail data
                ruledetail.push({
                    ColumnName: jQuery('#RuleCriteria').jqGrid('getCell', row.id, 'ColumnName'), 
                    ColumnOperator: jQuery('#RuleCriteria').jqGrid('getCell', row.id, 'ColumnOperator'),
                    FromValue: fromvalue,
                    ToValue: $(cellsOfRow[4]).text(),
                    Connector: jQuery('#RuleCriteria').jqGrid('getCell', row.id, 'Connector')
                });

            }
        }


        var ruledata = JSON.stringify({ 'detaildata': ruledetail });

        $.ajax({
            url: "@Url.Action("CreateRules", "Admin")",
            data: ruledata,
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function () {
                $(".Message").displayMessage("@Msg.Success");
                setTimeout(function () { location.href = "@Url.Action("Rule", AppType)"; }, 1000);
                },
            error: function () {
                $(".Message").displayError("@Msg.GeneralError");
                }
        });

这是我的 MVC 代码。

    [HttpPost]
    public ActionResult CreateRules(List<RuleData> detaildata)
    {

       RuleManager _savedata = new RuleManager();
       _savedata.Save(detaildata);
        var jsonData = "success";
        return Json(jsonData, JsonRequestBehavior.AllowGet);

    }

Answer 3

从 Jsp 页面发送代码：

  $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    url: "LoadDataservice.asmx/SaveData",
                    async: true,
                    data: '{"formData":"' + $('#check-user').serialize() + '"}',  // working
                    dataType: "json",
                    success: function (msg) {
                        $('#details').empty();
                        jsonArray = $.parseJSON(msg.d);
                        var $ul = $('<ul id="details">');
                        for (i = 0; i < jsonArray.length; i++) {
                            $("#details").append('<li id="' + i + '" name="head" >' + jsonArray[i].name + '</li>');
                        }
                        $('#details').listview('refresh');
                    },
                    error: function (msg) {
                        alert("Error");
                    }
                });

动作类：

 public string SaveData(string formData)
        {

            string s = formData;
            var keyValuePairs = from array in
                                    (from kvpString in s.Split('&')
                                     select kvpString.Split('='))
                                select new KeyValuePair<string, string>(array[0].Trim(), array[1].Trim());
            var dictionary = keyValuePairs.ToDictionary(kvp => kvp.Key, kvp => kvp.Value);
            var username = dictionary["username"];
            var password = dictionary["password"];


            string details = "testing";

            return details;
        }
    }