Retrieving all the cell data from a jQuery datatable on post

Question

This question relates to a question that I posted that I'm not getting answered: How to do batch row updating using jQuery Datatables and ASP MVC

I am using the jQuery datatables and ASP.NET MVC 4 . What I am trying to achieve is when I click on a submit button I need to post back all the datatable's data to my controller's action method. I will be editing my table data and then I need to post back this edited table data to my controller and then I want to process it all at once. I don't want row or cell updating on the fly.

I'm not sure how to do this. I even tried somehing like this but this is also not working:

This is how I populate my datatable:

$('#com-plus-components-datatable').dataTable({
     "aoColumns": [
          { "mDataProp": [0], "sWidth": "35%" },
          { "mDataProp": [1], "sWidth": "65%" }
     ],
     "bAutoWidth": false,
     "bFilter": false,
     "bLengthChange": false,
     "bPaginate": false,
     "bProcessing": true,
     "bServerSide": true,
     "bSort": false,
     "iDisplayLength": 50,
     "sAjaxSource": '@Url.Action("GetWindowsServices")'
});

This is my attempt to get the datatable data:

$('form').submit(function () {
     $.post("@Url.Content("~/Server/Test")",
     $('form').serialize(),
     function (data) {
          alert('success');
     }, 'json');
});

My action method to get my data and to do all processing (partial code below):

[HttpPost]
public ActionResult Test(string[] data)
{
     return View();
}

string[] data is always null on post.

How do I get all my datatable's data into my action method after I clicked the submit button?

Answer 1

You forgot to cancel the default action of the form submit by returning false from your .submit handler:

$('form').submit(function () {
     $.post('@Url.Action("Test", "Server")', $('form').serialize(), function (data) {
         alert('success');
     });
     return false; // <!-- You need this
});

or you could also do this:

$('form').submit(function (evt) {
     evt.preventDefault(); // <!-- You need this
     $.post('@Url.Action("Test", "Server")', $('form').serialize(), function (data) {
         alert('success');
     });
});

Also notice how I have used the Url.Action helper instead of Url.Content to generate the url to your controller action. This will take into account your route definitions. It's always bad to hardcode your urls.

Also for this to work make sure that you have respected the standard naming conventions of your input fields so that the default model binder will be able to deserialize the request into a string array.