Cannot figure out why I pass an array of JavaScript objects to controller method that the controller method isn't getting the object

Question

I been looking around for awhile now and have came across this question many times and I am doing the same thing that are in the solutions but baffled why its not working. I'm sure this question will be marked as a duplicate, and it is, but I am missing something.

Here is the array of JavaScript objects

var gridData = {
    tempData: [
        { UserName: "Tom", LastName: "Solomon" },
        { UserName: "Harry", LastName: "Solomon" },
        { UserName: "Sally", LastName: "Solomon" },
        { UserName: "Dick", LastName: "Solomon" },
    ]
};

Here is my Ajax

function TossIt() {
    var sendThis = gridData.tempData;
    console.log(sendThis);
    $.ajax({
        type: "POST",
        url: "/Junk/JAT?s=" + sendThis,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(sendThis),
        success: function (data, textStatus, jqXHR) { },
        complete: function (e) {
        }
    })
}

Here is the method I am passing it to

[HttpPost]
public List<Stuff> JAT(Stuff s)
{
    List<Stuff> result = new List<Stuff>();


    return result;
}

and here is the class

public class Stuff
    {
        public string UserName { get; set; }
        public string LastName { get; set; }
    }

I have a break point on the JAT method and s is always null

EDIT I need to manipulate some of the properties in objects then return the list

Answer 1

There are a number of issues with your code

1. You cannot send a javascript array of objects in a query string parameter and your url needs to be just url: '/Junk/JAT', , or preferably url: @Url.Action("JAT", "Junk"); which will ensure the url is correctly generated (as a side note, to bind the model from a query string, it would need to be /Junk/JAT?[0].UserName=Tom&[0].LastName=Solomon&[1].UserName=Harry&..... )
2. Your sending an array of objects representing a Stuff , therefore the parameter in the POST method must also implement IEnumerable<Stuff> (not a single Stuff )
3. Your specifying that the method return json (your use of dataType: "json", ) so therefore the method must return a JsonResult .

You code should be

Script

$.ajax({
    type: "POST",
    url: '@Url.Action("JAT", "Junk")',
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ s: sendThis }),
    success: function (data, textStatus, jqXHR) {
        .... // do something with the data you return
    },
    complete: function (e) {
    }
})

Controller

[HttpPost]
public JsonResult JAT(List<Stuff> s) // or ActionResult
{
    .... // manipulate the collection as required
    return Json(s);
}

Answer 2

[HttpPost]
public List<Stuff> JAT([FromBody]List<Stuff> s)
{
    List<Stuff> result = new List<Stuff>();


    return result;
}

Answer 3

The answer above using POST is the way to go. However, if you want to do GET and queryStrings , you can as well.

Trivial example:

• Client side (see $.param() )

   var gridData = { tempData: [ { UserName: "Tom", LastName: "Solomon" }, { UserName: "Harry", LastName: "Solomon" }, { UserName: "Sally", LastName: "Solomon" }, { UserName: "Dick", LastName: "Solomon" }, ] }; function TossIt() { var sendThis = gridData.tempData; console.log(sendThis); $.ajax({ type: "GET", url: "/JAT?" + $.param(gridData), //using $.param() here for query string success: function(data, textStatus, jqXHR) {}, complete: function(e) { } }); } 

• Controller side

  • follow the above comments/answer regarding List<Stuff>
  • HttpGet Attribute

  • Adjust the parameter name to tempData (re: $.param() )

     [System.Web.Mvc.HttpGet] public List<Stuff> JAT(List<Stuff> tempData) { ...... } 

Hth...