How to httppost a list of objects?

Question

I have this list of objects which I need to send from my angularjs javascript code:

var dataToSend = [{
                    SubId: "c9cb1d3e-8c32-4a9e-8f0d-0008196776de",
                    CustomerName: "Blah"
                }, {
                    SubId: "aaaa1d3e-8c32-4a9e-8f0d-0008196776de",
                    CustomerName: "Blah2"
                }]

I've tried these different variations but none of them are working:

1.

$http.post("url",
                {
                    dataType: 'json',
                    headers: {
                       contentType: "application/json; charset=utf-8",
                    },
                    method: "POST",
                    data: dataToSend,
                }).then...

2.

$http.post("url",
                    {
                        data: $.param(dataToSend),
                    }).then...

3

$http.post("url",
                        {
                            data: angular.toJson(dataToSend),
                        }).then...

4

$http.post("url",
                        {
                            data: { customers: dataToSend },
                        }).then...

5

$http.post("url",
                        {
                            data: JSON.stringify({ customers: dataToSend }),
                        }).then...

My API side code is (I have tried with [FromBody] attribute but no luck there):

        [HttpPost]
        public async Task<JsonResult> CreateCustomers(List<Customer> customers)
        {
              // customers is always null
        }

And this is my Customer.cs:

public partial class Customer
    {
        public System.Guid SubId { get; set; }
        public string CustomerName { get; set; }
    }

Can you please help me? I have tried posting to CreateCustomers(Customer c) without using a list and its working as expected. But when I use a list, its always coming as null on the other side.

EDIT: $.ajax is working but $http.post isn't. Any idea why?

var request = $.ajax({
                dataType: "json",
                url: "url",
                method: "POST",
                data: { '': dataToSend }});

Answer 1

Your post data is not matched with the parameter List<Customer> . Change your server side method to something like:

[HttpPost]
public async Task<JsonResult> CreateCustomers(JObject queryParam)
{
    // populate your list here
    // for eaxample : var customers = queryParam["customers"].ToString();
}

And also you can use this code to send data to the server:

$http({
    url: 'url',
    dataType: 'json',
    method: 'POST',
    data: jsonData,
    headers: { "Content-Type": "application/json" }
}).success(function(response){ $scope.response = response;
}).error(function(error){ $scope.error = error; });

Answer 2

Are you sending JSON ( Include dataType: 'json')

$http({  
            url: "url",  
            dataType: 'json',  
            method: 'POST',  
            data: dataToSend,  
            headers: {  
               contentType: "application/json; charset=utf-8",
            }  
         })

In C# add FromBody in parameter

[HttpPost]
        public async Task<JsonResult> CreateCustomers([FromBody]]List<Customer> customers)
        {
              // customers is always null
        }

More on Ajax parameters

contentType is the type of data you're sending, so application/json; charset=utf-8 is a common one, as is application/x-www-form-urlencoded; charset=UTF-8, which is the default.

dataType is what you're expecting back from the server: json, html, text, etc.

This should work. post full code if you face issue

Answer 3

use [ModelBinder] in front of your param.

    [HttpPost]
    public async Task<JsonResult> CreateCustomers([ModelBinder]List<Customer> customers)
    {
          // customers is always null
    }

Web API only uses model binding for simple types, falling back on formatters for everything else. Adding [ModelBinder] forces the complex types to use model binding anyway.