Call .NET Core controller method from React with values - reactjs

Question

I'm new to React and I just can't find clear information on how to call a controller in my .NET Core application, send it values from the form inputs and then get a result back from it. Doesn't seem like it should be hard to do but maybe I know so little that I'm asking Google the wrong questions. Anyway...
I have a controller method that looks like this. I have called it from Postman and it seems to work.
[ApiController]
[Route("user")]
public class UserController : ControllerBase
{
[HttpGet]
[Route("login/authenticate")]
public async Task<IActionResult> AuthenticateUserAsync([FromBody] AuthenticateUserRequest request)
{
... // sends request to back-end and gets a response
return Ok(response);
}
}
There's a request class that looks like this, and I want the UserID and Password properties from the React form to be set here.
public class AuthenticateUserRequest: Request
{
public string UserID { get; set; }
public string Password { get; set; }
}
The response that is returned contains a list of strings which is used to authenticate the user with an identity in the controller. I want to return this list to React to show what permissions the user has.
public class AuthenticateUserResponse: Response
{
public List<String> Permissions { get; set; }
}
And I'm trying to call it with something like this:
I got this fetch example from here: ASP.NET Core React project template - how to link to C# backend
but it doesn't seem to work.
handleSubmit(event) {
if (this.state.userId == "" || this.state.password == "") {
alert('Please enter User ID and Password.');
event.preventDefault();
}
else {
fetch('user/login/authenticate', {
method: 'get',
headers: { 'Content-Type': 'application/json' },
body: {
"UserID": this.state.userId.value,
"Password": this.state.password.value
}
})
.then(response => response.json())
.then(data => {
alert(data);
});
}
}
The alert never gets called and I don't know if it's doing anything at all. When I press the Submit button the form clears, and that's it.

Answer 1

When you use get in ajax to request the action in the Core API, you need to accept the parameters by using [FromQuery] attribute instead of [FromBody] attribute.
[HttpGet]
[Route("login/authenticate")]
public async Task<IActionResult> AuthenticateUserAsync([FromQuery] AuthenticateUserRequest request)
{
... // sends request to back-end and gets a response
return Ok();
}
Refer to this.