If the content type is json, data is not going to

Question

I'm using Visual Studio IDE for doing Angular2 project. Now the problem is, if the content-type is json, below code does't able to call WebAPI Post Action. Whereas, If the content-type is x-www-form-urlencoded, then able to call post action. But the data in WebAPI Post action parameter is null as shown here in image.

postEmployee(emp: Employee) {
    var body = JSON.stringify(emp);
    var headerOptions = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
    var requestOptions = new RequestOptions({ method: RequestMethod.Post, headers: headerOptions });
    return this.http.post('http://localhost:64925/api/Employee/PostEmployee', body, requestOptions).map(x => x.json());
}

after posting the data, which is null showing below..

So, for this problem I want to send json data from client side. But, if the content-type is json like below, it is not going to Post action method of WebAPI

postEmployee(emp: Employee) {
    var body = JSON.stringify(emp);
    var headerOptions = new Headers({ 'Content-Type': 'application/json' });
    var requestOptions = new RequestOptions({ method: RequestMethod.Post, headers: headerOptions });
    return this.http.post('http://localhost:64925/api/Employee/PostEmployee', body, requestOptions).map(x => x.json());
}

Web.config is

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

Any one knows the solution for the above stated problem in Visual Studio IDE..?Thanks in Advance.. Demo Project link from you tube. In this project, they are using Visual Studio Code..But I need to use same code in Visual Studio IDE.

Answer 1

Use [From Body] attribute for Employee in your action:

public IHttpActionResult PostEmployee([FromBody] Employee)

from the documentation:

When a parameter has [FromBody], Web API uses the Content-Type header to select a formatter.

Answer 2

Reference : https://www.youtube.com/watch?v=Ous6v0r7kXc, try after removing httpProtocol From WebConfig

Answer 3

The error was due to absence of below line

config.EnableCors(new EnableCorsAttribute(origins:"*", headers: "*", methods: "*"));

in WebApiConfig.cs of WebAPI Project..Along with you should install Microsoft.AspNet.WebApi.Cors for the WebAPI project.

WebApiConfig.cs

public static void Register(HttpConfiguration config) {
        config.EnableCors(new EnableCorsAttribute(origins:"*", headers: "*", methods: "*"));
        //config.EnableCors(new EnableCorsAttribute("http://localhost:4200", headers: "*", methods: "*"));

        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { action = "Get", id = RouteParameter.Optional }
        );
}