How can I specify the content type as application/json format?
I have a POST method that is used to add a customer's contact. I have created a WebAPI with the following code snippet...
[Produces("application/json")]
[Route("api/[controller]")]
public class ContactController : Controller
{
private readonly DatabaseContext _context;
public ContactController(DatabaseContext context)
{
_context = context;
}
[Route("SaveContact")]
[HttpPost]
public bool SaveContact(Contact contact)
{
return true;
}
[Route("GetContactList")]
[HttpGet]
public List<Contact> GetContactList()
{
var result = _context.Contact.ToList();
return result;
}
}
What I have attempted I have used POSTMAN and Fiddler tool to test whether I can send a body to the API. The results are as follows:
a. Fiddler: able to send the data (as a contact model)
[![enter image description here][1]][1]
b. POSTMAN: able to send the data (as a contact model)
[![enter image description here][1]][1]
Issue I am facing While attempting to make a POST request through Angular 2, I am unable to send the body to the API. I have tried various methods but nothing seems to work. It is frustrating that the model is not populating in the API. Here are the details of how I am sending the request from Angular 2 to the API.
Below are my two different ways to make a Post Request.
import { Headers, Http, HttpModule, RequestMethod, RequestOptions, Response ,Request } from '@angular/http';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/map';
import { Injectable } from '@angular/core';
import { _App } from "app/app.global"
import { ResponseContentType } from '@angular/http/src/enums';
@Injectable()
export class PostService{
headers:any;
requestoptions:any;
constructor(private _http:Http){
}
PostMethod2(URL,Body){
let url:string;
url = _App._URL;
const contact = [];
contact.push(Body);
console.log(JSON.stringify(contact));
url = url + URL;
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append("Access-Control-Allow-Origin","*");
console.log(url);
console.log(this.headers);
this.requestoptions = new RequestOptions({
method: RequestMethod.Post,
url: url,
headers: this.headers,
body: JSON.stringify(contact),
responseType : ResponseContentType.Json,
})
return this._http.request(new Request(this.requestoptions))
.map((res: Response) => {
if (res) {
debugger;
return [{ status: res.status, json: res.json() }]
}
debugger;
});
}
PostMethod(URL,Body){
let url : string;
const contact = [];
contact.push(Body);
url = _App._URL + URL;
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append("Access-Control-Allow-Origin","*");
console.log(JSON.stringify(contact));
console.log(url);
console.log(this.headers);
return this._http.post( url,JSON.stringify(contact),{headers:this.headers})
.map((res: Response) => {
if (res) {
debugger;
return [{ status: res.status, json: res.json() }]
}
debugger;
});
}
}
Postmethod()
https://i.sstatic.net/UQf05.png
Postmethod2()
https://i.sstatic.net/0R5ky.png
Response https://i.sstatic.net/Dvnwi.png
Here is a request I made through a jQuery Ajax method where you can see that the content-type has a value of application/json, which I am not getting in Angular 2.