Angular 2 http post null Web Api Core

Question

I am implementing a new web application in angular 2, using an existing Web Api (ASP.NET Core), but i am having trouble with HTTP Post. After searching all kind of information, I still not abble to resolve this problem and my Web API still receiving null params from angular post.

I need to see what is wrong here. Here is my Angular 2 code:

   posted(event) {
 @Injectable()
export class httpTestComponent {

constructor(public http: Http) {

};

posted(event) {
    var user: UserViewModel = {
        name: "angularUser",
        password: "pw",
        email: "angularMail"
    }
    let pedido = JSON.stringify(user);

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    this.http.post('http://localhost:10832/api/Account/Register', { pedido }, options)
        .map(this.extractData).catch(this.handleError).subscribe();
};

ViewModel:

export interface UserViewModel {
name: string,
password: string,
email: string,

}

Web API:

 [HttpPost]
    [Route("Register")]
    public void Register([FromBody] UserRegisterViewModel userVm)
    {
   }

ViewModel WEB API:

    public class UserRegisterViewModel
{
    public string name { get; set; }

    public string password { get; set; }

    public string email { get; set; }
}

Can someone tell me where Am I wrong?

Time to debug your code: Capture what is sent to the server from the browser using the developer tools and check that, you should be able to check the entire http request. If that does not help then try to use postman or fiddler to get it to execute outside of your client code. — Igor
– Igor, Commented Nov 15, 2016 at 20:32

Adnan A. · Accepted Answer · 2017-11-09 16:45:28Z

7

There is no reason to add JSON.stringify(). Try removing it.

EDIT:

Either remove JSON.stringify() or remove the braces around body data:

this.http.post('http://localhost:10832/api/Account/Register', pedido, options)

Angular will try to serialize already serialized JSON string as an object, if you leave it this way and that's why you're having an issue.

Source code: Link

edited Nov 9, 2017 at 16:45

answered Nov 15, 2016 at 20:21

Adnan A.

1,9821 gold badge14 silver badges18 bronze badges

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

4 Comments

Igor Over a year ago

The angular2 documentation and examples state otherwise. Can you post some documentation to back your claim up?

Igor Over a year ago

Everything you wrote from remove the braces around body.... and on is correct. Everything before that point is not accurate, if you remove it your answer should solve the OPs question/problem.

André Azevedo Over a year ago

That was my problem! Very thankful mate, I removed the braces and everything run ok!

Adnan A. Over a year ago

@Igor, if you take a look at the source code link, you will see that if the body of the Request object is of type Object, it will get serialized by JSON.stringify(). Doing it yourself is unneccessary. Thanks. :)

Collectives™ on Stack Overflow

Angular 2 http post null Web Api Core

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related