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

Posted

技术标签:

【中文标题】使用值从 React 调用 .NET Core 控制器方法【英文标题】:Call .NET Core controller method from React with values 【发布时间】: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]。我应该能够像数组一样访问它吗?我正在尝试的一切都给了我“未定义”,所以我不知道我是否错误地访问它或者它是否是一个伪造的对象。有什么方法可以检查吗? 【参考方案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。

【讨论】:

以上是关于使用值从 React 调用 .NET Core 控制器方法的主要内容,如果未能解决你的问题,请参考以下文章

统一流控服务开源:基于.Net Core的流控服务

.NET Core + React Antd Pro脚手架

如何使用 ASP.NET Core 解决 REACT 中的 CORS 错误

在 HTTPS 上使用 Windows 身份验证首次调用 ASP.NET Core 2.0 Web API 在 Chrome 中总是失败

ASP.NET Core API 和 React JS

使用 ASP.NET Core 后端和 React 前端的 Web 应用程序中的授权和身份验证?