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` -> https://stackoverflow.com/a/59294059/3902958 — panoskarajohn, Dec 23 '19 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, Dec 23 '19 at 13:10
can you share a screenshot of your request from network tab of developer tools by following @Alann answer. — Farhat Zaman, Dec 23 '19 at 13:48
@FarhatZaman nothing happens in the network tab that's the problem i believe :) — Matija, Dec 23 '19 at 13:50

Farhat Zaman · Accepted Answer · 2019-12-23T14:12:19.687

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 '19 at 14:12

answered Dec 23 '19 at 13:51

Farhat Zaman

1,339
10
20

I tried adding the headers, still not entering the breakpoint from angular. – Matija Dec 23 '19 at 13:59
just remove `CheckIfIDExists` from the backend side as well. and then try the suggested solution. – Farhat Zaman Dec 23 '19 at 14:08
Works now! Thanks :) – Matija Dec 24 '19 at 07:11

score 0 · Answer 2 · answered Dec 23 '19 at 13:12

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 '19 at 13:12

Alann

647
5
19

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 Dec 23 '19 at 13:30
When sending the request through Postman it gets to the controller but through Angular it doesn't. This is the request made in postman: https://localhost:44353/api/AngularTest/45674/test Where 45674 is one parameter and test the other – Matija Dec 23 '19 at 13:40

score 0 · Answer 3 · answered Dec 23 '19 at 13:25

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 '19 at 13:25

Rajesh

193
2
13

score 0 · Answer 4 · answered Dec 30 '19 at 12:37

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

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

4 Answers4