Post And send object to MVC Web Api using Angular 2

Question

I want to post data to my MMVC web api by using angular 2. But i don't know how to pass a object to my MVC API using angular. Any Help will be grateful.

My Service Code in Angular 2

@Injectable()
export class TaskService {

  postitems(userId,username,userrole)
  {

      let data = {
        "UserName": username,
        "UserRole": userrole

      }

     let  headers: {
        'Content-Type': 'application/json; charset=utf-8', /*or whatever type is relevant */
        'Accept': 'application/json' 
    }
    //let body = JSON.stringify(data);
   // let headers = new Headers({ 'Content-Type': 'application/json' ,'Accept': 'application/json'});
    //let options = new RequestOptions({ headers: headers });

  return this._http
    .post('http://localhost:27353/api/Users',JSON.stringify(data), headers)
    .toPromise()
    .then(res => res.json().data)
    .catch(this.handleError);
}    

private extractData(res: Response) {
  let body = res.json();
  return body.data || { };
}  

My MVC Api Code

 [ResponseType(typeof(User))]
        public IHttpActionResult PostUser(User user)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Users.Add(user);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = user.UserID }, user);
        }

Model.cs

namespace WebApi.Models
{
    using System;
    using System.Collections.Generic;

    public partial class User
    {
        public int UserID { get; set; }
        public string UserName { get; set; }
        public string UserRole { get; set; }
    }
}

Answer 1

What I can see without testing your solution is that you have missed UserId in the data object you are passing from client side to the server. And in the restApi method you also need to declare the passed object User user with [FromBody].

    let data = {
        "UserId": userId,
        "UserName": username,
        "UserRole": userrole

      }

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

    return this.http.post('http://localhost:27353/api/Users', body, options)
                .toPromise()
                .then(res => res.json().data)
                .catch(this.handleError); 



      [ResponseType(typeof(User))]
                public IHttpActionResult PostUser([FromBody]User user)
                {
                    if (!ModelState.IsValid)
                    {
                        return BadRequest(ModelState);
                    }

                    db.Users.Add(user);
                    db.SaveChanges();

                    return CreatedAtRoute("DefaultApi", new { id = user.UserID }, user);
                }

Answer 2

You might want to specify types since it's typescript. Also, inject the HTTP service along with some other typescript issues I fixed such as userID being optional for the constructor). You should also use camelcase for naming in JS.

Lastly, make UserID optionable in partial class User in modal.cs since it's not included.

 //Changes noted below

    import { Http, Response } from '@angular/http';


        export class TaskService {

    //inject here

    constructor(private http: Http, private res : Response) { }

        //Important! (Make userId optionable if not inserted with the rest)
          postitems: any (username: string, userrole: string, userId?: any) )
          {

              let data: any = {
                "UserName": username,
                "UserRole": userrole
              }

             let  headers: any = {
                'Content-Type': 'application/json; charset=utf-8', /*or whatever type is relevant */
                'Accept': 'application/json' 
            }
            //let body = JSON.stringify(data);
           // let headers = new Headers({ 'Content-Type': 'application/json' ,'Accept': 'application/json'});
            //let options = new RequestOptions({ headers: headers });

//let's use this extract Data method since it's here

    private extractData(res: Response) {
              let body = res.json();
              return body.data || { };
            }  
          return this._http
            .post('http://localhost:27353/api/Users',JSON.stringify(data), headers)
            .toPromise()
            .then(data => extractData(data))
            .catch(this.handleError);
        }