asp.net mvc 6 web api + angular resource post array as object property

Question

I am trying to post a complex object from angular to my webapi the obeject looks like this

{
    Name: "test",
    Tax: 23,
    Addresses: [ {
        country: "ro",
        city: "bucharest"
    },
    {
        country: "fr",
        city "paris"
    }]}

and the object from server

public class Model {
    public Model (){
        Addresses = new List<Address>();
    }

    public string Name {get; set;}
    public int Tax {get; set;}
    public List<Address> Addresses {get; set;}
}

and Address has 2 string properties

my old application was written in MVC5 webapi2 and using angularjs $http service and the object was mapping perfectly, now I changed to MVC6 (asp.net 5) and if I remove the array from my javascript object it's working perfecyly but I don't have the array, if I add it than the object on server is NULL.

My question is: How can I send an array as object property from angularjs using $resource service to mvc6 controller?

You need to display the most important parts of this issue. The code that is sending this data to the server, and the code that receives this data on the server. — Stafford Williams, Sep 09 '15 at 00:48
Are you posting JSON to the server? What is the `contentType`? — haim770, Sep 09 '15 at 07:19

score 0 · Accepted Answer · edited May 23 '17 at 11:58

Finally I made it work, my example below:

test1.html

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script type="text/javascript" src="test1.js"></script>
    <div ng-controller="TestController">
        <div>Test</div>
    </div>
</body>
</html>

test1.js

var myApp = angular.module('myApp', []);

myApp.controller('TestController', ['$scope', '$http', function ($scope, $http) {
    var dataObj = {
        Name: "test",
        Tax: 23,
        Addresses: [{
            country: "ro",
            city: "bucharest"
        },
        {
            country: "fr",
            city: "paris"
        }]
    }
    $http({
        url: 'http://localhost:1522/api/values',
        method: 'POST',
        data: JSON.stringify(dataObj),
        dataType: 'json'
    }).success(function (data) {
        debugger;
        alert("OK");
        //TODO.....
    }).error(function (data) {
        //TODO....
    });
}]);

On the screenshot you can see my solution folders and breakpoint after POST:

Replace URLs with your domain and navigate to http://yourdomain/test.html via browser for run your angular app.

P.S.: It example works when your angular app and web api in the same domain. If you want separate them (move angular app to another domain or project) you should config CORS - How do you enable cross-origin requests (CORS) in ASP.NET 5 & MVC 6.

I finally did it, the error was because one of the properties from my array was datetime and it wasn't formatted correctly. It also works with ngResource service, but I figured out this by creating another project with a much simpler object like you showed in the post. So thank a lot, the discussion with you it was very helpful. — Iulian Florescu, Sep 09 '15 at 12:58

asp.net mvc 6 web api + angular resource post array as object property

1 Answers1