How to send an array from angular 8 to web api core?

Question

I have method in typeScript file:

searchUsers() {
 this.filterParams = [
 { parameterName: 'FirstName', filterOperator: 'Like', parameterValue: this.firstName },
 { parameterName: 'LastName', filterOperator: 'Like', parameterValue: this.lastName },
 { parameterName: 'UserName', filterOperator: 'Like', parameterValue: this.userName },
 { parameterName: 'Email', filterOperator: 'Like', parameterValue: this.email }
 ];
 this.service.getUsers(this.id, this.filterParams);
}

which calls service method:

getUsers(id, filterParams) {
 let params = new HttpParams()
 .set('id', id);
 .set('filterParams', filterParams);
 this.http.get(this.rootURL + '/user/getUsers', { params: params })
 .subscribe((res: any) => {
 this.users = res.users;
 };
 });
}

FilterParameter model in web api core is:

public class FilterParameter
{
 public string ParameterName;
 public FilterOperator FilterOperator;
 public string ParameterValue;
}

My web api core method is firing after click on search button in angular. This is my method in web api core:

[Route("getUsers/{id?}/{filterParams?}")]
[HttpGet]
public ActionResult GetUsers(int id, [FromQuery] List<FilterParameter> filterParams)
{
 try
 {
 _logger.LogInformation("Geting all users from the database");
 var users = _baseBL.GetUsers(id, filterModel);
 return Ok(new { users = users.Results, usersCount = users.RowCount});
 }
 catch (Exception ex)
 {
 _logger.LogError($"Something went wrong: {ex}");
 return StatusCode(500, "Internal server error");
 }
}

Id is good, but the problem is that my filterParams are empty list. Any idea why?

• lealceldeiro: Did you try sending this kind of request to the API using POSTMAN (or similar) and see that the parameters are OK? I'm asking because the first thing is to identify where is the problem (backend or frontend). If the backend contract is well defined in angular you just need to format the request to fulfill that contract.
• nemostyle: @lealceldeiro I am not sure if I know how to send filterParams using postman... I did it before, it is still empty list, but I could be wrong in sending params. I will now search how to send params properly, than I will come back...

Answer 1

You should use HttpPost to achieve it.

Angular:

this.http.post(this.rootURL + '/user/getUsers/' + id, filterParams)
 .subscribe((res: any) => {
 this.users = res.users;
 };
});

.NET

[Route("getUsers/{id?}")]
[HttpPost]
public ActionResult GetMembersInGym(int gymId, [FromBody] List<FilterParameter> filterParams)
{
 ...
}

To use Get, use FromUri try like this:

public ActionResult GetUsers(int id, [FromUri] List<FilterParameter> filterParams)
{
}

• lealceldeiro: Why? GET is intended to retrieve information (POST doesn't) .... that's what the OP needs (get information)? Why change it to POST?
• lealceldeiro: As this post is getting more and more upvotes.... Can anyone, please, explain to me Why an endpoint intended to be used to retrieve information should be mapped to a POST method?
• lealceldeiro: You are giving me the reason with this post you linked and definitely you should not change this to POST, just to retrieve the information!. Quoted from that link: But in general terms GET is used when server returns some data to the client and have not any impact on server whereas POST is used to create some resource on server. So generally it should not be same.
• Adrita Sharma: I have mentioned a particular answer, let me rewrite instead of sending the link. the user is passing parameters like firstname, email etc in the uri, suppose an email and firstname is very long, there is a risk of URL maximum length exception. Also since parameters are passed, response isn't always same. If we want an idempotent request URI (i.e. response is always the same), then use GET, else POST.
• Adrita Sharma: I have put my views.. I can be wrong, please put your own view , there is no point in debating :)

Answer 2

First your id should be appended with url as params and second to send the query params use {params:yourparamsobject} so your code should be

 getUsers(id, filterParams) {
 let params = {filterParams:filterParams};
 this.http.get(this.rootURL + '/user/getUsers'+id, { params: params })
 .subscribe((res: any) => {
 this.users = res.users;
 };
 });
 }

Also notice in your api model FilterOperator is of type FilterOperator and on ui you are sending and string so either change FilterOperator to type string on api or change filterOperator to match the type on ui