Passing jqGrid row data from a view to a controller - which method?

Question

I worked on sending all rows from jqGrid to an action method, using the general idea from this question , and some code from jqGrid Wiki comments. Essentially in submit, I want ALL the string data to return to the controller so that I can save it. I tried using a hidden field to store all the row data, but the controller never gets everything, only the last edited cell in the grid. So I switched to ajax approach, but no matter what I tried, I can't get ajax POST to meet JSON. Here is what I have right now:

 $("#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; }); 

And my controller method signature:

 [HttpPost] public ActionResult UpdateAwesomeGridData(string gridData) 

I tried changing the gridData parameter from string to string[] to object[] to all kinds of things, and nothing works. If I leave it as a string , I get the data, but the format is all stupid, for example (column names replaced):

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="]

I got this from Fiddler, and for writing, the JSON tab shows nothing for the request when I squeak it. Is there a way I can use JSON-ify for this array and send it in a single call? What type will my parameter be in my action method?

EDIT - solution

For any other people who are just as stupid as I am, here is how I got this to work:

First, at the suggestion of Oleg, I added loadonce: true to the jqGrid definition. Then we changed the message sending function as follows:

 $("#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; }); 

Then the signature of my controller changed:

 public ActionResult UpdateAwesomeGridData(IEnumerable<GridBoundViewModel> gridData) 

Hope this helps someone in the future.

Answer 1

I see a lot of problems that you have.

The first problem is that you are using $.param(row) and rowData array rowData encoded (??? !!!) data. I think that the correct code should contain direct posting of the data returned from getRowData : data: { gridData: gridRows } . On the server side, you can use UpdateAwesomeGridData(string gridData) and then convert gridData to List<List<string>> , e.g.

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

I would like to take one step back and ask a question: why do you need to send data to a server that it already has? If you need some kind of goal for all the data from the grid, you can simply use the same controller action that generates the data, and so you will already have the same data .

Sending data to the server may be required only in one scenario: you used loadonce: true , modified the data locally and at the end of the changes you need, sent all the changed data to the server. In case using getRowData would not be the best choice, because it gives you data only from the current page. To get all the data, it is better to use getGridParam("data") .

Answer 2

I see that Oleg has already answered your question, and I do not want to rewrite it, however I thought about sharing my idea here. I think that passing data as an object to the MVC makes more sense than just a string, and then you can pass that object to your DAO class.

Here is my jQuery code (obviously thanks to Oleg for this code).

  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"); } }); 

And here is my MVC code.

  [HttpPost] public ActionResult CreateRules(List<RuleData> detaildata) { RuleManager _savedata = new RuleManager(); _savedata.Save(detaildata); var jsonData = "success"; return Json(jsonData, JsonRequestBehavior.AllowGet); } 

Answer 3

send the code from the Jsp page:

  $.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"); } }); 

Action class:

  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; } }