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.

Answer 1

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;
    }
 }

Answer 2

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))
    );

Answer 3

Try like this

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

Answer 4

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))
    );