Passing complex object to WebAPI from AngularJS

Question

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 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
– Overly Excessive, Commented Jun 23, 2015 at 21:49

Pankaj Parkar · Accepted Answer · 2015-10-07 02:40:56Z

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});
}

edited Oct 7, 2015 at 2:40

answered Jun 23, 2015 at 21:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vildan · Accepted Answer · 2015-11-12 05:27:35Z

1

This approach allows to send complex 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);
     ...
}

answered Nov 12, 2015 at 5:27

Vildan

1,9941 gold badge16 silver badges17 bronze badges

Comments

John Way · Accepted Answer · 2017-04-06 15:39:24Z

0

What you want to do is not possible, but this solution allows you to use your complex 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");
}

answered Apr 6, 2017 at 15:39

John Way

2371 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

Passing complex object to WebAPI from AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related