Http failure response for http://localhost:5000/api/users/siteUsers/[object%20Object],[object%20Object],[object%20Object]: 400 Bad Request - asp.net-core-webapi

Question

I am trying to add a multi-select dropdown in angular 11 and .netcore 3.1 web api.
when i submit the dropdown, errors occur like this.
"Http failure response for http://localhost:5000/api/users/siteUsers/[object%20Object],[object%20Object],[object%20Object]: 400 Bad Request"
backend
[Route("siteUsers/{id}")]
How can i pass the from frontend the data.
Edit:
Angular service.ts file
CreateSiteUsersAsync(data: FormData, id: number) {
return this.http.post(`${this.baseUrl}/${this.basePath}/siteUsers/${id}`, data);
}
.ts file
async onSubmitHandler() {
const data = { ...this.userForm.value};
await this.userService.CreateSiteUsersAsync(data,data.siteCode).toPromise();
}

Answer 1

A few things that is wrong with your function.
First Route is being specified, but the not the Http method. Meaning the default method is Get. You cannot pass form data to a Get method. It should be, Postor Put. So first thing is add a http method:
[Route("siteUsers/{id}")]
[HttpPost]
or more elegantly:
[HttpPost("siteUsers/{id}")]
Next is the receival attributes where you get the data from. There are four options [FromRoute], [FromForm], [FromQuery] and [FromBody].
By default C# uses [FromQuery]. So for both the id and the data you will need to specify where you search this data. See code below:
[HttpPost("siteUsers/{id}")]
public IActionResult MyEndpoint([FromRoute] id, [FromForm] data)
{
...
return Ok();
}
You can also use [FromBody] instead of the [FromForm] tag since technically both are are from the body.