How to pass array of objects to an MVC Controller in Jquery?

Question

I'm trying to post an array of objects from js ajax to asp.net mvc controller. But controller parameter is always comes null. Is there a type mismatch or something else?

Js ajax

    var obj = {};
    var arr = [];

    obj = {
           id: clicked.attr("name"),
           name: clicked.text().trim()
          }

    if (clicked.hasClass("active")) {
        clicked.removeClass("active");
        clickedCount--;

        arr.pop(obj);
    }
    else {
        clicked.addClass("active");
        clickedCount++;

        arr.push(obj);
    }

    $.ajax({
            url: "/Players/Shuffle",
            type: "POST",
            data: JSON.stringify({ list: arr }),
            contentType: "json",
            success: function (data) {}
           });

Controller

    [HttpPost]
    public ActionResult Shuffle(List<player> list)
    {
        return RedirectToAction("Shuffled", new { l = list });
    }

Error: list in controller is always null.

UPDATE:

In addition to the code above, why can't I see a new page with the list that posted to the Shuffle? Shuffled should be dealing with this.

public ActionResult Shuffled(List<Player> list)
{
    ViewData["PlayerList"] = list;
    return View(list);
}

cshtml

@model List<Player>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
 }

 @{ 
    ViewBag.Title = "Shuffled";
   }

 <h1 id="test">
    list: @ViewData["PlayerList"]
 </h1>

`data: JSON.stringify({ list: arr }),` and add `contentType: 'json'` and change your parameter to `List` where `T` is a model containing properties `id` and `name` (but since your array only contains one object, why post an array?) — , May 31 '16 at 11:41
Do I have to pass it with json? Can't I just send it as it is? — Miral, May 31 '16 at 11:42
Not unless you use indexed property names - `data: { [0].id: x, [0].name: y, [1].id: xx, [1].name: yy ..... }` — , May 31 '16 at 11:45
In debug, I see the list comes null again but when I run it I see the post values properly in firebug.(Which is the situation I don't understand). Anyways I'm going to update the question now. — Miral, May 31 '16 at 11:53
It will not be `null` if you use the code in my initial comment. — , May 31 '16 at 11:55
And your making an ajax call, so `return RedirectToAction()` in your controller method is pointless (ajax calls never redirect). What are you actually trying to do? — , May 31 '16 at 11:58
You cant. The whole point of ajax is to **stay on the same page**. Just do a normal submit. And you have now completely changed you question. Please roll back your changes — , May 31 '16 at 12:01
No, A form, and submit your form. Alternatively, have your method return a partial view and update the current page with it. — , May 31 '16 at 12:04
Ok then I will try that. I thought you can post your values with ajax and redirect somewhere else in controller. — Miral, May 31 '16 at 12:06

hamzeh.hanandeh · Answer 1 · 2016-05-31T12:03:40.863

Change your code like this, I think it will be work:

Js ajax

$.ajax({
            url: "/Players/Shuffle",
            type: "POST",
            data: {list: JSON.stringify(arr)},
            datatype: "json",
            success: function (data) {}
           });

Controller

[HttpPost]
public ActionResult Shuffle(string list)
{
    var js = new JavaScriptSerializer();
    var deserializedList = (object[])js.DeserializeObject(list);
    return RedirectToAction("Shuffled", new { l = deserializedList });
}

How to pass array of objects to an MVC Controller in Jquery?

1 Answers1

Linked