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.

MyClass[] theData is not a multi-dimensional array. And it needs to be data: JSON.stringify({ theData: data }), — user3559349
– user3559349, Commented Jun 30, 2016 at 13:47
Yes of course you can - just use data: JSON.stringify({ theData: data }), - my comment is that MyClass[] is an array (not a multi-dimensional array) — user3559349
– user3559349, Commented Jun 30, 2016 at 13:51
Oops - just noticed that its a GET so that will not work. You need to make it a type: "Post", otherwise you will need to prefix each property with the relevant indexers — user3559349
– user3559349, Commented Jun 30, 2016 at 13:52
Yeah. That's the problem I guess? Kinda new to MVC, but as I understand it I cannot have two POST actions in my controller? Correct me if I'm wrong. I need the second one (POST) for the second action if u understand what I mean. — Robin
– Robin, Commented Jun 30, 2016 at 13:57

aditya mukkawar · Accepted Answer · 2016-06-30 14:05:52Z

2

Please try this

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

answered Jun 30, 2016 at 14:05

aditya mukkawar

1661 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3559349 · Accepted Answer · 2016-07-01 01:35:13Z

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.

daf · Accepted Answer · 2016-06-30 13:48:40Z

0

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

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

answered Jun 30, 2016 at 13:48

daf

1,32812 silver badges17 bronze badges

Collectives™ on Stack Overflow

Array to mvc controller with ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related