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<T> where T is a model containing properties id and name (but since your array only contains one object, why post an array?) — user3559349
– user3559349, Commented May 31, 2016 at 11:41
Do I have to pass it with json? Can't I just send it as it is? — Miral
– Miral, Commented May 31, 2016 at 11:42
Not unless you use indexed property names - data: { [0].id: x, [0].name: y, [1].id: xx, [1].name: yy ..... } — user3559349
– user3559349, Commented May 31, 2016 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
– Miral, Commented May 31, 2016 at 11:53
It will not be null if you use the code in my initial comment. — user3559349
– user3559349, Commented May 31, 2016 at 11:55

hamzeh.hanandeh · Accepted Answer · 2016-05-31 12:03:40Z

1

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 });
}

edited May 31, 2016 at 12:03

answered May 31, 2016 at 11:54

hamzeh.hanandeh

7536 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related