title: Submitting jqGrid row data from view to controller - what method?
body: <p>I've been working on submitting all of the rows from a jqGrid to an action method using the general idea from <a href="https://stackoverflow.com/questions/3356805/how-do-i-submit-jqgrid-values-as-formfields">this question</a> and some code from the comments on the <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods" rel="nofollow noreferrer">jqGrid Wiki</a>.  Essentially, on submit, I want ALL of the row data to get back to the controller so I can persist it.  I've tried using a hidden field to store all of the row data, but the controller never seems to get everything, only the last edited cell in the grid.  So I switched to an ajax approach, but no matter what I've tried I can't get the ajax <code>POST</code> to come across as JSON.  Here's what I have right now:</p>
  
  <pre><code>$("#submitButton").click(function () {
      $("#awesomeGrid").jqGrid('resetSelection');
      var gridRows = $("#awesomeGrid").jqGrid('getRowData');
      var rowData = new Array();
      for (var i = 0; i &lt; 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;
  });
  </code></pre>
  
  <p>And my controller method signature:</p>
  
  <pre><code>[HttpPost]
  public ActionResult UpdateAwesomeGridData(string gridData)
  </code></pre>
  
  <p>I've tried changing the <code>gridData</code> parameter from <code>string</code> to <code>string[]</code> to <code>object[]</code> to all sorts of stuff, and nothing seems to work.  If I leave it as <code>string</code>, I get the data, but the format is all wacky, like this (column names substituted):</p>
  
  <p><code>
  gridData=["Id=1&amp;Field1=1945&amp;Field2=0&amp;Field3=0&amp;Field4=1&amp;Field5=Some+string+value&amp;Field6=&amp;Field7=&amp;Field8=&amp;Field9s=","Id=2&amp;Field1=1945&amp;Field2=0&amp;Field3=0&amp;Field4=2&amp;Field5=Another+string+value&amp;Field6=&amp;Field7=&amp;Field8=&amp;Field9s=","Id=3&amp;Field1=1945&amp;Field2=0&amp;Field3=0&amp;Field4=3&amp;Field5=Yet+another+string&amp;Field6=&amp;Field7=&amp;Field8=&amp;Field9s=","Id=4&amp;Field1=1945&amp;Field2=0&amp;Field3=0&amp;Field4=4&amp;Field5=Final+string&amp;Field6=&amp;Field7=&amp;Field8=&amp;Field9s="]
  </code></p>
  
  <p>I got this out of Fiddler, and for the record, the JSON tab shows nothing for the request when I fiddle it.  Is there a way I can JSON-ify this array and send it in a single call?  What type would my parameter be on my action method?</p>
  
  <p><strong>EDIT - Solution</strong></p>
  
  <p>For any other people that are as dumb as I am, here's how I got it to work:</p>
  
  <p>First, on Oleg's suggestion, I added <code>loadonce: true</code> to the jqGrid definition.  Then, changed my submit button function as follows:</p>
  
  <pre><code>$("#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;
  });
  </code></pre>
  
  <p>Then, changed my controller method signature:</p>
  
  <pre><code>public ActionResult UpdateAwesomeGridData(IEnumerable&lt;GridBoundViewModel&gt; gridData)
  </code></pre>
  
  <p>Hope this helps someone in the future.</p>