从React中调用.NET Core控制器方法,其值为。

我是React的新手,我只是找不到清晰的信息,如何在我的.NET Core应用程序中调用控制器,从表单输入中向它发送值,然后从它那里得到一个结果。看起来做起来并不难,但也许我知道的太少,以至于我在Google上问错了问题。总之…

我有一个控制器方法,看起来像这样。我已经从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和密码属性。

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

而我试图用这样的方式来调用它:我从这里得到了这个fetch的例子。ASP.NET Core React项目模板–如何链接到C#后台。但它似乎并不工作。

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

警报从来没有被调用,我不知道它是否有任何作用。当我按下提交按钮时,表单就会清除,仅此而已。

解决方案:

当你在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();
}

参考 这个.

给TA打赏
共{{data.count}}人
人已打赏
解决方案

使两个分叉的分支同步进行

2022-5-12 9:00:23

解决方案

如何在React中检查某些或某一元素是否被挂载?

2022-5-12 9:00:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索