How to pass multiple parameters from angular 8 to .NET Core API

Question

Hello i'm not sure if anyone posted this question but since it's my first one I will try and be as precise as i can.

I'm trying to pass multiple string params to a .NET Core API from an Angular 8 app and to no avail.

This is the code in angular:

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TestService{
 constructor(private http: HttpClient) { }

  searchSpecificID(formattedNumber: string, vin: string): Observable<number> {

    const paramsIoS = new HttpParams().set('formattedNumber', formattedNumber).set('vin', vin);

    return this.http.get<number>('https://localhost:44353/api/AngularTest/CheckIfIDExists',  {params: paramsIoS}).pipe(
      tap(data => console.log('Checked'),
      catchError(this.handleError))
    );
  }

  private handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occured: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }
}

And this is the code in the .NET Core API Controller:

 [Route("api/[controller]")]
 [ApiController]
 public class AngularTestController : ControllerBase
 {
    [HttpGet("CheckIfIDExists/{formattedNumber}/{vin}")]
    public int CheckIfIDExists(string formattedNumber, string vin) 
    {
        return 0;
    }
 }

I've tried some combinations from these questions (.NET Core API pass multiple, Angular HTTP get multiple parameters) but had no success so far.

I've enabled cors in my .NET Core API application because I have some HTTP Get requests without parameters and they work fine.

In your WebAppi HttpGet you do not need the CheckIfIdExists -> stackoverflow.com/a/59294059/3902958 — panoskarajohn
– panoskarajohn, Commented Dec 23, 2019 at 13:07
Remove your HttpGet attribute. Your formattedNumber and vin parameters will be sent like query parameters: ?formattedNumber=yourNumberValue&vin=yourVinValue so it doesn't match CheckIfIDExists/{formattedNumber}/{vin} — Roman Koliada
– Roman Koliada, Commented Dec 23, 2019 at 13:10
can you share a screenshot of your request from network tab of developer tools by following @Alann answer. — Farhat Zaman
– Farhat Zaman, Commented Dec 23, 2019 at 13:48
@FarhatZaman nothing happens in the network tab that's the problem i believe :) — Matija
– Matija, Commented Dec 23, 2019 at 13:50

Farhat Zaman · Accepted Answer · 2019-12-23 14:12:19Z

2

just try like this

let headers = new HttpHeaders();
headers  = headers.append('responseType', 'json');
return this.http.get<number>(`http://localhost:44353/api/AngularTest/${formattedNumber}/${vin}`, {headers: headers});

and you backend code should be like

[Route("api/[controller]")]
 [ApiController]
 public class AngularTestController : ControllerBase
 {
    [HttpGet("{formattedNumber}/{vin}")]
    public int CheckIfIDExists(int formattedNumber, string vin) 
    {
        return 0;
    }
 }

edited Dec 23, 2019 at 14:12

answered Dec 23, 2019 at 13:51

Farhat Zaman

1,37910 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matija Over a year ago

I tried adding the headers, still not entering the breakpoint from angular.

Farhat Zaman Over a year ago

just remove CheckIfIDExists from the backend side as well. and then try the suggested solution.

Matija Over a year ago

Works now! Thanks :)

Alann · Accepted Answer · 2019-12-23 13:12:50Z

0

You're trying to convert http params to path parameter, if you want your URL like this

/api/AngularTest/CheckIfIDExists?vin=dummy&formattedNumber=dummy your code is fine

but from what I see, it's not how your api work, try something like this :

const paramsIoS = new HttpParams()
 return this.http.get<number>(`https://localhost:44353/api/AngularTest/${formattedNumber}/${vin}`,  {params: paramsIoS}).pipe(
      tap(data => console.log('Checked'),
      catchError(this.handleError))
    );

answered Dec 23, 2019 at 13:12

Alann

6575 silver badges19 bronze badges

2 Comments

Matija Over a year ago

I tried this but it doesn't go to the breakpoint in the API. Is the HTTPGet ok as it is or do i need to modify it in any way?

Matija Over a year ago

When sending the request through Postman it gets to the controller but through Angular it doesn't. This is the request made in postman: localhost:44353/api/AngularTest/45674/test Where 45674 is one parameter and test the other

Rajesh · Accepted Answer · 2019-12-23 13:25:42Z

0

Try like this

 return this.http.get<number>(`https://localhost:44353/api/AngularTest/${formattedNumber}/${vin}`).pipe(
  tap(data => console.log('Checked'),
  catchError(this.handleError))
);

answered Dec 23, 2019 at 13:25

Rajesh

3033 silver badges13 bronze badges

Comments

Naveen Motwani - AIS · Accepted Answer · 2019-12-30 12:37:25Z

0

The problem is with the way you are passing parameters, I don't understand one thing from the above answers, why you need to modify the API. I believe just passing the params right should work for you.

return this.http.get<number>(`https://localhost:44353/api/AngularTest/CheckIfIDExists/${formattedNumber}/${vin}`).pipe(
      tap(data => console.log('Checked'),
      catchError(this.handleError))
    );

answered Dec 30, 2019 at 12:37

Naveen Motwani - AIS

6294 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to pass multiple parameters from angular 8 to .NET Core API

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related