Array to mvc controller with ajax

Question

I'm trying to get some data (multidimensional array) to my GET controller (for display in a modal/dialog box) from a list (the user checks some values and then gets sent to a modal/dialog box that should display the chosen values):

$('input:checkbox').each(function () {
    if ($(this).is(':checked')) {
        var prop= [];
        prop['Name'] = "TEST";
        prop['Id'] = "123"
        data.push(prop);
    }
});

When I log this (above) data, it looks fine. Then I use it the ajax call:

$.ajax({
    type: "GET",
    url: url,
    data: JSON.stringify({ data }),
    contentType: "application/json; charset=utf-8",
    success: function () {
        alert("OK");
    }
});

I've a Model for using the data in the action (and the partial view):

public class MyClass
{
    public string Name { get; set; }
    public string Id { get; set; }
}

This is my action:

    public ActionResult Merge(MyClass[] theData)
    {
       ...
    }

But in the action the 'theData' is always null. If I use 'POST' in the ajax, the POST action gets called, and I don't want to do that in this step. I want to use the POST action after, when the user have made some modifications (eg. Title change) and then saves. THEN I do a POST and saves the new data.

Answer 1

Please try this

  $('input:checkbox').each(function () {
        if ($(this).is(':checked')) {
            var prop= {};
            prop.Name  = "TEST";
            prop.Id = "123"
            data.push(prop);
        }
    });

Answer 2

The parameter in your Merge() method is MyClass[] theData which means you need to send an array of objects, not an array of arrays. Start by changing the script to generate the data to

var data = [];
$('input:checkbox').each(function () {
    if ($(this).is(':checked')) {
        data.push({ Name: 'TEST', Id: '123' });
    }
});

Next, you need to change the method to a [HttpPost] (rename it if necessary to avoid any conflict with any existing [HttpPost]public ActionResult Merge( .. ) method).

Then you need to change the type to "Post" and stringify the data with the name of the methods parameter before sending it

$.ajax({
    type: 'Post', // change this
    url: url,
    data: JSON.stringify({ theData: data }), // change this
    contentType: 'application/json; charset=utf-8',
    success: function () {
        alert("OK");
    }
});

Side note: If you did want to do this to a [HttpGet] method, then it would be be necessary to send the data as .../Merge?[0].Name=TEST&[0].Id=123&[1].Name=TEST&[1].Id=123 etc (i.e. with indexers), however you should not generally be sending collections of objects to a GET method. Apart from the ugly query string, you could exceed the query string limit and throw an exception.

Answer 3

You're sending your data as a string. Don't use JSON.stringify

Change data: JSON.stringify({ data }) to data: data