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

Matija Published at Dev

Matija

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.

Farhat Zaman

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

Collected from the Internet

Please contact [email protected] to delete if infringement.