使用值从 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 控制器方法的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 ASP.NET Core 解决 REACT 中的 CORS 错误
在 HTTPS 上使用 Windows 身份验证首次调用 ASP.NET Core 2.0 Web API 在 Chrome 中总是失败