I am trying to post a JavaScript item to a C# WebAPI call using AngularJS. Below is what I am trying to do.

Objects

class Address
{
    public string Street { get; set; }
    public string City { get; set; }
    public string State { get; set; }
}
class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Address address { get; set; }
}

My C# Controller function

    [Route("Update/")]
    public void Update(Person person)
    {
        _service.Update(person);
    }

AngularJS call

    this.update = function (person) {
        $http.post("api/Person/Update/", person);
    }

When I receive the object in the WebAPI controller the address is null. Why is this data not being received?

Edit I was wrong in my original question the Person object looked like this

class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public IAddress address { get; set; }
}

When I changed address from IAddress to Address everything worked as expected.

I am trying to post a JavaScript item to a C# WebAPI call using AngularJS. Below is what I am trying to do.

Objects

class Address
{
    public string Street { get; set; }
    public string City { get; set; }
    public string State { get; set; }
}
class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Address address { get; set; }
}

My C# Controller function

    [Route("Update/")]
    public void Update(Person person)
    {
        _service.Update(person);
    }

AngularJS call

    this.update = function (person) {
        $http.post("api/Person/Update/", person);
    }

When I receive the object in the WebAPI controller the address is null. Why is this data not being received?

Edit I was wrong in my original question the Person object looked like this

class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public IAddress address { get; set; }
}

When I changed address from IAddress to Address everything worked as expected.

• javascript
• c#
• angularjs
• asp-web-api

Share Improve this question Follow edited Jun 24, 2015 at 13:43 James asked Jun 23, 2015 at 21:46 JamesJames 54111 gold badge1111 silver badges3939 bronze badges 2

• I would guess that the model binding is failing, can you look at what POST data you are sending out? It needs to match quite exactly for the model binding to succeed. – Overly Excessive Commented Jun 23, 2015 at 21:49
• What does person look like if you log it? – Christofer Eliasson Commented Jun 23, 2015 at 21:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Your post would be in json format which will assign person object to person, Address object must be well formed object as it contain sub properties.

Code

$scope.person = {
  'Street': '',
  'LastName': '',
  'Address': {
     'Street': '',
     'City': '',
     'State': '',
  },
}

this.update = function (person) {
    $http.post("api/Person/Update/", { person : $scope.person});
}

This approach allows to send plex objects with arrays and sub objects through HTTP GET:

Angular:

$http({
       url: '/myApiUrl',
       method: 'GET',
       params: { personStr: angular.toJson(person, false) }
      })

C#:

[HttpGet]
public string Get(string personStr)
{
     Person obj = new JavaScriptSerializer().Deserialize<Person>(personStr);
     ...
}

What you want to do is not possible, but this solution allows you to use your plex object on the .NET side. There is no body in a GET request, so you have to add your object into the URI.

Change your web api method to:

[Route("Update/")]
public void Update([FromUri]Person person)
{
    _service.Update(person);
}

Change your angular code to:

this.update = function (person) {
    $http.post("api/Person/Update?FirstName=John&LastName=Doe&Address%5BStreet%5D=123%20Main%20St&Address%5BCity%5D=Knoxville&Address%5BState%5D=Tennessee");
}