使用值从 React 调用 .NET Core 控制器方法答案

【问题标题】：Call .NET Core controller method from React with values使用值从 React 调用 .NET Core 控制器方法
【发布时间】：2020-08-05 12:59:14
【问题描述】：

我是 React 的新手，我只是找不到关于如何在我的 .NET Core 应用程序中调用控制器、从表单输入向其发送值然后从中获取结果的明确信息。看起来这应该不难，但也许我知道的太少以至于我问谷歌错误的问题。总之……

我有一个看起来像这样的控制器方法。我已经从 Postman 那里调用它，它似乎可以工作。

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

有一个看起来像这样的请求类，我希望在此处设置 React 表单中的 UserID 和 Password 属性。

public class AuthenticateUserRequest: Request
{
    public string UserID { get; set; }
    public string Password { get; set; }
}

返回的响应包含一个字符串列表，用于通过控制器中的身份验证用户。我想将此列表返回给 React 以显示用户拥有的权限。

public class AuthenticateUserResponse: Response
{
    public List<String> Permissions { get; set; }
}

我试图用这样的东西来称呼它：我从这里得到了这个获取示例：ASP.NET Core React project template - how to link to C# backend 但它似乎不起作用。

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

警报永远不会被调用，我不知道它是否在做任何事情。当我按下提交按钮时，表单就会清除，就是这样。

【问题讨论】：

这是一个 .Net Core + React 应用程序，它是由 VS 创建的吗？
一件事是您应该将 HttpGet 更改为 HttpPost 并使用前端的 POST 方法。
是的，在 VS 中使用 React 模板创建的。
userId 和 password 状态变量是对象吗？如果不是，为什么代码会尝试访问每一个的 value 属性？
我已将其更改为发布。还删除了 .value。警报正在打印 [object Object]。我应该能够像数组一样访问它吗？我正在尝试的一切都给了我“未定义”，所以我不知道我是否错误地访问它或者它是否是一个伪造的对象。有什么方法可以检查吗？

标签： reactjs asp.net-core

【解决方案1】：

当您在ajax中使用get请求Core API中的动作时，您需要使用[FromQuery]属性而不是[FromBody]属性来接受参数。

[HttpGet]
[Route("login/authenticate")]
public async Task<IActionResult> AuthenticateUserAsync([FromQuery] AuthenticateUserRequest request)
{
     ... // sends request to back-end and gets a response
    return Ok();
}

请参阅this。

【讨论】：