Web API object is null when sent from Angular2 using POST

Question

I'm trying to insert a record by doing an http post from Angular2 to an ASP.NET Web API endpoint. In Angular the object contains data, but when it gets to the endpoint there's no data. It is null. Can you see what I'm doing wrong by this code?

Angular:

 public addBook (body: Object): Observable<Book[]> {
    let bodyString = JSON.stringify(body);  //stringify payload
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers });

    // post request to create new book
    return this._http.post(this.actionUrl,bodyString,options)
        .map((res:Response) => res.json()) 
        .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
}

ASP.NET Web API

  // POST: api/Books
  [System.Web.Http.HttpPostAttribute]
  [HttpOptions]
  [ResponseType(typeof(Book))]
  public async Task<IHttpActionResult> PostBook(Book book)
  {
     if (!ModelState.IsValid)
     {
        return BadRequest(ModelState);
     }

     db.Books.Add(book);
     await db.SaveChangesAsync();

     return CreatedAtRoute("DefaultApi", new { id = book.Id }, book);
  }

Rich · Accepted Answer · 2017-06-04 00:06:37Z

Finally got it to work. Here's the code I used:

Angular:

public createService (url: string, param: any): Observable<any> {
    let body = JSON.stringify(param);
    let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8'})
    let options = new RequestOptions({ headers: headers });  // create a request option

    // post request to create new book
    return this._http
        .post('http://localhost:1234/api/Books/', body, options)
        .map((res: Response) => res.json())
        .catch((error: any) => Observable.throw(error.json().error || 'Server error')); 
}

Web API

// POST: api/Books
    [HttpPost]
    public async Task<IHttpActionResult> PostBook(Book book)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        db.Books.Add(book);
        await db.SaveChangesAsync();

        return CreatedAtRoute("DefaultApi", new { id = book.Id }, book);
    }

In Web Api, WebApiConfig.cs I added these two lines to the Register method:

// port number of client
var cors = new EnableCorsAttribute("http://localhost:9000", "*", "*");
config.EnableCors(cors);

In Web.config I added these lines:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />
  </customHeaders>
</httpProtocol>

I also added the nuget package: Microsoft.AspNet.WebApi.Cors

kitko112 · Accepted Answer · 2017-06-01 04:27:13Z

-1

JSON.stringify is not required when using http client in Angular 2, seems duplicated as the below question.

POST from Typescript to Web API API, unable to pass a JSON Object

answered Jun 1, 2017 at 4:27

kitko112

7261 gold badge7 silver badges14 bronze badges

1 Comment

Rich Over a year ago

Not quite the same. That example uses a Promise instead of an Observable. Might be the same issue though, I'm not sure.

Collectives™ on Stack Overflow

Web API object is null when sent from Angular2 using POST

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related