Angular service NOT hiting Asp.Net MVC Post Controller

Question

I have this method in my angular service I want it to hit a the controller in my asp.net CORE api. But it does not hit my controller. I have tried to make the post in Postman and it works. I do not understand why my post in Angular does not work Thank you for your help.

 addFamily(family: Family) { this.http.post<Family>('https://localhost:44344/api/componentFamily', JSON.stringify(family)) }

Here is my ASP.NET CORE API.

 // POST api/componentFamily [HttpPost] public async Task<IActionResult> Post([FromBody] ComponenFamilyViewModel componentFamilyViewModel) { Family family = new Family(); family.FamilyId = componentFamilyViewModel.FamilyId; family.FamilyName = componentFamilyViewModel.FamilyName; await _componentFamilyService.AddFamily(family); return CreatedAtAction("Get", new { id = family.FamilyId }, family); }

@PritomSarkar I have services.AddCors(); and app.UseCors(x => x .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); In my startup.cs file — J.C
– J.C, Commented Aug 17, 2021 at 17:30

Antoniossss · Accepted Answer · 2021-08-17 17:37:17Z

Http client's observables are so called cold. In order for them to fire - and perform the web request - you have to subscribe to it, so

addFamily(family: Family) { return this.http.post<Family>('https://localhost:44344/api/componentFamily', JSON.stringify(family)) }

and the caller

yourService.addFamily(famili).subscribe(result=>do whatever with the result)

Nicola Biada · Accepted Answer · 2021-08-17 17:33:34Z

1

Try to send the object without stringify if you use [FromBody]:

 this.http.post<Family>('https://localhost:44344/api/componentFamily', family)

answered Aug 17, 2021 at 17:33

Nicola Biada

2,8481 gold badge11 silver badges24 bronze badges

1 Comment

J.C Over a year ago

It did not fix my problem, but you are right I do not need to and the JSON.stringify(family) in this case thank you for your help.

Some random IT boy · Accepted Answer · 2021-08-17 17:36:56Z

Angular's HTTP client uses RxJS if you don't:

Call .subscribe() (or with a callback)
Call toPromise().then(val => {...})
Use the async pipe from a template like so: <div *ngIf="response$ | async">

...the side-effect (network call) will not be performed.

Try the following:

@Component({...}) export class YourComponent { constructor(private http: HttpClient) {} public async onAddFamily(family: Family) { const response$ = this.http.post<Family>('https://localhost:44344/api/componentFamily', JSON.stringify(family)) await response$.toPromise() }

Collectives™ on Stack Overflow

Angular service NOT hiting Asp.Net MVC Post Controller

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related