I am new to Angular 4 web API and facing an issue with saving data to the database using Angular 4 web API. When I make a GET request from Angular, it works fine, but the POST method is not working as expected. I keep getting a 415 Unsupported Media Type error. However, when I use Postman, the POST method works correctly after changing the content type to application/json. Unfortunately, the same approach does not work in Angular. I've tried various solutions found online, but none of them have resolved my issue. Here's an example where I've hardcoded some data.
Here is a snippet from my component's TypeScript file:
fulldetail: Idetails[] = [];
detail: Idetails;
onClick(value: any) {
// Hardcoded data
this.id = 1;
this.name = "abcd";
this.address = "abcdefgh";
this.about = "samplestring";
this.number = 18888;
this.count = 12.0;
this._Service.CatchDetail(this.id, this.name, this.address, this.about, this.number, this.count)
.subscribe(detail => {
detail.forEach(value => {
this.fulldetails.push(value);
});
},
error => {
console.error(error);
this.statusMessage = "Problem with the service. Please try again later.";
});
}
And here is an excerpt from my service's TypeScript code:
CatchDetail(id: number, name: string, address: string, about: string, number: number, count: number): Observable<Idetails[]> {
let data = JSON.stringify([{ id: id, name: name, address: address, about: about, nu: number, count: count }]);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.post('http://localhost:1234/api/contrllername/' + 'detail', data,
{
params: [{ id: id, name: name, address: address, about: about, nu: number, count: count }]
})
.map((response: Response) => <Idetails[]>response.json())
.catch(this.handleError);
}
Lastly, here is the workdetails.ts (class) code:
export class Idetails {
constructor(
public id: number,
public name: string,
public address: string,
public about: string,
public number: number,
public count: number
) { }
}
This part shows my controller implementation:
[HttpPost]
public void Detail([FromBody] List<spGetDetails_Result> jsonvalues) {
foreach (spGetDetails_Result Datadetail in jsonvalues) {
spGetDetails_Result Detailobject = new spGetDetails_Result();
Detailobject.id = Datadetail.id;
Detailobject.name = Datadetail.name;
Detailobject.address = Datadetail.address;
Detailobject.about = Datadetail.about;
Detailobject.number = Datadetail.number;
Detailobject.count = Datadetail.count;
enqentities.spGetDetails_Result(Datadetail.id, Datadetail.name, Datadetail.address, Datadetail.about, Datadetail.number, Datadetail.count);
}
}
public class spGetDetails {
public int id { get; set; }
public string name { get; set; }
public string address { get; set; }
public string about { get; set; }
public int number { get; set; }
public int count { get; set; }
}
zone.js:2933 POST http://localhost:1234/api/controllername/Detail?id=1&name=abc&address=hj1hgj368&about=dfghjkl&number=31&count=3 415(Unsupported Media Type). body : "{"Message":"The request entity's media type 'text/plain' is not supported for this resource.","ExceptionMessage":"No MediaTypeFormatter is available to read an object of type 'List`1' from content with media type 'text/plain'...........etc