Ajax Submit to asp.net mvc post action or turn collection into json?

Question

I need to get the Row ID for each table row where Finalize has been checked and post that string/json to an ASP.net MVC Controller. The Ajax is giving me problems. I managed to grab the data that needs to be submitted; but I'm not sure what the best way to proceed is. Do I need to create a json object and then post that or is there a simple way I can post what I have? I tried the json route and didn't get very far so I went back to this, which is at least grabbing the correct data.

  finalize = function() { var tableData = ""; $('#results').find('tr').each(function() { var row = $(this); if (row.find('input[type="checkbox"]').is(':checked')) { tableData = tableData + $(this).find('td:first').text() + '\\n'; // get ID } }); //var myRows = JSON.parse(tableData); //$.post("/Journal/SaveEntry", { Row: myRows }); alert(tableData); }; 

 <script src="https://github.com/maxazan/jquery-treegrid/blob/master/js/jquery.treegrid.js"></script> <script src="https://github.com/maxazan/jquery-treegrid/blob/master/js/jquery.treegrid.bootstrap3.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <table class="table tree truncate_table"> <tbody> <tr class=" info"> <th>Row ID</th> <th>...</th> <th>Finalize</th> </tr> <tr class="treegrid-1"> <td> <span class="treegrid-expander"></span> R4915 </td> <td>...</td> <td> <input type="checkbox" name="Finalize" value="Finalize"> </td> </tr> <tr class="treegrid-2"> <td> <span class="treegrid-expander"></span> <a target="_blank" href="http://example.com" class="vt-p"> R4942 </a> </td> <td>...</td> <td> <input type="checkbox" name="Finalize" value="Finalize"> </td> </tr> </tbody> </table> <button onclick="finalize()" type="button" class="btn btn-danger pull-right">Finalize</button> 

Answer 1

What you want is most likely jquery serialize and post your form. Look at following blog post, Using jQuery to submit ASP .NET MVC form .

Answer 2

I'm assuming here that return a collection of the ID's would be more useful that a string which you would then need to split on the controller

Html

<button type="button" id="finalize" class="btn btn-danger pull-right">Finalize</button>

Script

$('#finalize').click(function() {
  var idArray = new Array();
  $('#results').find('tr').each(function() {
    var row = $(this);
    if (row.find('input[type="checkbox"]').is(':checked')) {
      idArray.push(row.find('td:first').text());
    }
  });
  $.ajax({
    url: '@Url.Action("SaveEntry", "Journal")';
    type: 'post'
    traditional: true,
    data: { values: idArray }
  }) 
});

Controller

public ActionResult SaveEntry(string[] values) // or int[] values if the ID is typeof int
{
}

Answer 3

please change your finalize function:

    finalize = function() 
    {
          var tableData = "";
          $('#results').find('tr').each(function() {
            var row = $(this);
            if (row.find('input[type="checkbox"]:checked')) 
            {
              tableData = tableData + row.find('td:first > a').text() + '\n'; 
            }
          });

          //$.post("/Journal/SaveEntry", tableData); // parse json at your controller

          alert(tableData);
        };