Passing JSON Array from Javascript to Web API Controller method

Question

I was not able to get the JSON array parameters in web api controller method (SaveDetails).
Here are my code.

JavaScript Code:

  $.ajax(
    {
        url  : "api/Test/SaveDetails",
        type : "POST",
        data : {
                    "employees":
                    [
                        { "firstName": "John", "lastName": "Doe" },
                        { "firstName": "Anna", "lastName": "Smith" },
                        { "firstName": "Peter", "lastName": "Jones" }
                    ]
                },
        success: function (data) {alert("success");},
        error: function () {alert("Error");}
    })
    

Controller method

[HttpPost]
public DataSet SaveDetails(Models.Person[] obj)
{
    //save opertion.    
}

Model Method:

 public class Person
{
    public string firstName { get; set; }
    public string lastName { get; set; }
}

What are the changes to be made to get the JSON array parameters in web api method.

Campestral

Did you try POSTing your data as JSON (see https://mcmap.net/q/118368/-jquery-posting-json)? Then in your controller you can retrieve this data from the request body using [FromBody] attribute. – Sublunar

Answer 1

Try the following code:

Declare the model method as follows:

public class Models.employees
{
    public string firstName { get; set; }
    public string lastName { get; set; }
}

public class Models.RootObject
{
    public List<employees> employees { get; set; }
}

Controller:

[HttpPost]
public DataSet SaveDetails([FromBody]RootObject Person)
{
    //save opertion.    
}

Here comes the expected Result:

Contamination

Important note: the model class has to have a default constructor + public setters, otherwise this will not work. – Presidentelect

Answer 2

I ran across this thread when searching for an answer to my problem, trying to pass a list/array of object to a web api controller.

Details at this link: https://kwilson.io/blog/post-an-array-of-objects-to-webapi-using-jquery/

Change your data to be a single anonymous object instead of a raw array and it’ll work.

So in your case you might do the following for your data

data : {
                "":
                [
                    { "firstName": "John", "lastName": "Doe" },
                    { "firstName": "Anna", "lastName": "Smith" },
                    { "firstName": "Peter", "lastName": "Jones" }
                ]
            },

And in your Web API controller

[HttpPost]
public DataSet SaveDetails(List<Models.Person> obj)
{
    //save operation.    
}

This way you don't have to create another class to hold a list object like in Veera's answer.

Headwater

Answer 3

try like this:

$.ajax(
    {
        url  : "api/Test/SaveDetails",
        type : "POST",
        contentType : 'application/json',
        data : {
                    "obj":
                    [
                        { "firstName": "John", "lastName": "Doe" },
                        { "firstName": "Anna", "lastName": "Smith" },
                        { "firstName": "Peter", "lastName": "Jones" }
                    ]
                },
        success: function (data) {alert("success");},
        error: function () {alert("Error");}
    })

Controller:

[HttpPost]
public DataSet SaveDetails([FromBody]Models.Person[] obj)
{
    //save opertion.    
}

Pocketful