How to pass multiple parameters to ASP.NET Core 5 controller action from Angular service?

Question

I use ASP.NET Core 5 technology for backend and Angular 15.0 for my frontend.

The action of controller in backend to get some filtered items is written as below:

[HttpGet("getAllCustomerPaymentsByDateRange")]
public async Task<IActionResult> GetAllCustomerPaymentsByDateRange([FromQuery] DateTime firstDate,[FromQuery] DateTime endDate,[FromQuery] long customerId )
{
    // ... rest of code 
}

I want to pass these parameters from a method in an Angular service to the action:

getAllCustomersByDateRange(???): Observable<PaymentForList[]> {
    return this.http.get<PaymentForList[]>(this.baseUrl + '/getAllCustomerPaymentsByDateRange/', ???);
}

How can I pass parameters to Angular method that are received by the ASP.NET Core controller action correctly? I tried to pass parameters as a model and other side receives it as ([FromBody] ModelParams params), but I got error on the Angular side that:

can not assign PaymentForList[] | ArrayBuffer to PaymentForList[]....

Is there another way to do this?

May I know in your API, what is the response type returned? List of `PaymentForList`? — Yong Shun, Dec 31 '22 at 09:34
In addition, is it correct to receive the parameters by the server side action method as coded above? Thank you, I will try and announce the results as soon as possible. — R. Nourmandi, Dec 31 '22 at 11:17
@Nourmandi, the API is correct, you use the `[FromQuery]` attribute to retrieve the query string parameters. — Yong Shun, Dec 31 '22 at 11:25
I tried you suggestion, the parameters sent to API after appending to httpParams are: firstDate = F{_is_AMomentObject :true, _isUTC:false,{...}, _Local: Local, _d: Mon Des 26 2022 00:00:00 GTM+0330}, and endDate = F{_is_AMomentObject :true, _isUTC:false,{...}, _Local: Local, _d: Wed Des 28 2022 00:00:00 GTM+0330}, and customerId = "2". but in the API, the action receives : firstDate: 0001-01-01T00:00:00, endDate: 0001-01-01T00:00:00 and customerId: 0. Where did I go wrong? — R. Nourmandi, Dec 31 '22 at 17:35
Are you passing the `firstDate` and `endDate` as ISO Date string, the format should be: "2022-12-31T00:00:00Z" and the `customerId` should be provided as number? — Yong Shun, Jan 01 '23 at 01:58
I copied and pasted whatever you provided. customerId =2. Its not string. — R. Nourmandi, Jan 01 '23 at 03:36
Even, I define a ParametersClass and used [bindproperties] attribute for it in Api to receive parameters [FromQuery], but nothing is changed — R. Nourmandi, Jan 01 '23 at 04:07
I converted dates to IsoString before passing them to service method. the service method receives them correctly date string format as "2022-12-31T00:00:00Z" and assign them to httpParams, but in backend, action still receives them as "0001-01-01T00:00:00". — R. Nourmandi, Jan 01 '23 at 06:53
ohhhh! The mistake is here: we should assign parameters to hhtpParms objects as: params = params.append('firstDate', firstDate.toISOString()); and so on ... — R. Nourmandi, Jan 01 '23 at 07:20

Yong Shun · Accepted Answer · 2023-01-01T07:47:23.630

Not recommend sending a request with the body to a GET API as discussed in HTTP GET with request body.

To pass query parameters, you should use HttpParams.

getAllCustomersByDateRange(firstDate: Date, endDate: Date, customerId: number): Observable<PaymentForList[]> {

  let params: HttpParams = new HttpParams();
  params = params.append('firstDate', firstDate.toISOString());
  params = params.append('endDate', endDate.toISOString());
  params = params.append('customerId', customerId);

  let httpOptions = {
    params: params
  };

  return this.http.get<PaymentForList[]>(this.baseUrl + '/getAllCustomerPaymentsByDateRange/', httpOptions);
}

Refer to HttpClient.get() Overload #15.

How to pass multiple parameters to ASP.NET Core 5 controller action from Angular service?

1 Answers1