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

Question

I am trying to pass a JSON Object from a typescript POST call to a Web API method. Fiddler shows that the object has been converted into JSON and the Content-Type is 'application/JSON'. But at the API controller, the parameter value displays null instead of JSON.

Typescript:

createPO(product: string): Promise<string> {
   var headers = new Headers();
   headers.append('Content-Type', 'application/json');
   let options = new RequestOptions({ headers: headers });
   return this._http.post(this._creatPOUrl, JSON.stringify(product), options)
   .toPromise()
   .then(response => <string>response.statusText)
   .catch(this.handleError);
   }

Web API: [HttpPost] public async Task CreatePOInMO([FromBody] string product) { return Ok(); }

product contains null. If I pass the actual value inside product object from typescript(which is a JSON) , it works. But I cannot hard code like this.

I followed this post : Angular2 Service not passing JSON to WebAPI But it looks like I am doing whatever is mentioned here.

Can you post your WEB-API configuration ? I suppose the JSON converter does not expect the JSON format in the same way as the standard JSON for example I had a similar problem posting { name: 'test' } from front end ant the expected class in the be was { Name: 'test' } because of the camel case the WEB-API standard converter could not translate the response. also a request could be helpful — Nicu

cartant cartant · Accepted Answer · 2017-01-11T20:14:55

In Angular 2, when posting JSON with the Http client, you should not call JSON.stringify:

this._http.post(this._creatPOUrl, product, options)

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

1 Answers