AngularJS with .net core model not binding

Question

So I have been learning some .net core and I am building an API with it. Normally I would work with angular and send requests there.

I have the following angular snippet:

//The data I need to send.
$scope.PersonalInfo = {
    firstName: '',
    lastName: '',
    companyName: '',
    email: '',
    password: '',
    confirmPassword: '',
    imageLink: ''
};

Then there's the backend model for the same data:

public class UserProfileModel
{

    public string userID { get; set; }

    public string firstName { get; set; }

    public string lastName { get; set; }

    public string companyName { get; set; }

    public string email { get; set; }

    public string password { get; set; }

    public string confirmPassword { get; set; }

    public string imageLink { get; set; }
}

And finally the method that should send it:

$scope.UpdateProfile = function () {

    var profile = JSON.stringify($scope.PersonalInfo);

    $http.post('/api/Profile/Users', profile).then(function (response) {
        debugger;
        $log.log(profile);
        $log.log(response);
    });
};

No matter how many changes I have done, (send the data as a stringified JSON, or send the scoped object), when the request hits the controller, I end up with this:

$scope.PersonalInfo is full of data before the request is sent.

Any help is very appreciated. Thanks in advance.

There is no need to stringify the JS object before sending it (this is done automatically by $http). Have you tried it without the stringification? — Pop-A-Stash
– Pop-A-Stash, Commented May 2, 2017 at 16:29
make your C# UserProfileModel in PascalCase ... UserId, FirstName etc... This probably has to do with the JSON Serializer settings. — Muqeet Khan
– Muqeet Khan, Commented May 2, 2017 at 16:38
Can you add userId: '' to PersonalInfo and see if that works, it may be looking for all properties. — Stephen Gilboy
– Stephen Gilboy, Commented May 2, 2017 at 16:42
Do you know how to use Google Chrome's network traffic tool to check the requests/responses? — user3180309
– user3180309, Commented May 2, 2017 at 16:47

Muqeet Khan · Accepted Answer · 2017-05-02 17:44:30Z

5

You need to mention [FromBody] attribute in your post call. Like So,

    [HttpPost]
    [Route("api/bar/users")]
    public IActionResult Users([FromBody]UserProfileViewModel profile)
    {

        return Json(new { Data = profile });
    }

That should do it.

The necessity to use the FromBody attribute is so that the framework can use the correct input formatter to model bind. The default formatter used, for example, with content type application/json is the JSON formatter based on Json.Net

Detailed information at: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding

edited May 2, 2017 at 17:44

answered May 2, 2017 at 16:56

Muqeet Khan

2,1241 gold badge18 silver badges28 bronze badges

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

3 Comments

Carlos Jimenez Bermudez Over a year ago

Great, that worked very well. If I may ask. Why is it necessary to add the annotation for it to do it this way now? It used to accept data from the Request's body by default before.

durga siva kishore mopuru Over a year ago

Hi Muqeet Khan, i tried using FromBody also but not binding data in our model, so any other way to bind data

Carlos Jimenez Bermudez Over a year ago

Hi Durga Siva, .Net Core now requires the content type of json to be sent by your request or otherwise won't accept it either.

Collectives™ on Stack Overflow

AngularJS with .net core model not binding

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related