如何从View调用我自己的API？ ASP.NET MVC

Question

我有一个为用户注册/身份验证和类似操作而创建的API。张贴方法示例：

    [AllowAnonymous]
    [HttpPost("authenticate")]
    public IActionResult Authenticate([FromBody]AuthenticateModel model)
    {
        var user = _userService.Authenticate(model.Username, model.Password);

        if (user == null)
            return BadRequest(new { message = "Username or password is incorrect" });

        var tokenHandler = new JwtSecurityTokenHandler();
        var key = Encoding.ASCII.GetBytes(_appSettings.Secret);
        var tokenDescriptor = new SecurityTokenDescriptor
        {
            Subject = new ClaimsIdentity(new Claim[]
            {
                new Claim(ClaimTypes.Name, user.Id.ToString()),
                new Claim(ClaimTypes.Role, user.Role)
            }),
            Expires = DateTime.UtcNow.AddDays(7),
            SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
        };
        var token = tokenHandler.CreateToken(tokenDescriptor);
        var tokenString = tokenHandler.WriteToken(token);

        // return basic user info and authentication token
        return Ok(new
        {
            user.Id,
            user.Username,
            Token = tokenString,

        });

我现在需要前端来实现我的API。因此，我想从View调用此API。例如，假设我要创建一个简单的登录页面：

<div class="row">
<div class="col-md-12">
    <form method="post" action="">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Username"></label>
            <input asp-for="Username" class="form-control" />
            <span asp-validation-for="Username" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Password"></label>
            <input asp-for="Password" class="form-control" />
            <span asp-validation-for="Password" class="text-danger"></span>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>

我现在如何调用此登录表单的authenticate post方法？因为我有一个控制器，它是API控制器，而我有一个控制器，是动作控制器，对于用户来说。

如果需要，文件结构：File structure

Answer 1

您可以使用ASP.NET MVC核心标记帮助器：

<form asp-controller="MyControllerName" asp-action="Authenticate" method="post">
    <!-- Input and Submit elements -->
</form>

Answer 2

可以通过两种方式调用自己的网络操作：

• 本地HTML表单提交。
• AJAX

本机提交重新加载您的整个页面。并且地址将更改为URL或您的Web操作。通常用作搜索功能，例如：

<form asp-controller="Search" asp-action="Blogs" method="get">
    <input type="text" name="question" />
    <input type="submit" />
</form>

当用户单击提交按钮提交表单时，浏览器将重定向到/search/blogs?question=textHeInput。

为了防止页面刷新，您可以使用纯JavaScript提交请求。称为AJAX。

https://en.wikipedia.org/wiki/Ajax_(programming)

例如：

// Require jQuery:
$.post('/authenticate', { "yourPropertyName" : "yourPropertyValue" }, function(response) {
    // Do something after the request. Access response like this:
    alert(response.Username);
});

将显示服务器响应的用户名。

Answer 3

由于您将JwtBearer与WebAPI一起使用，因此假设您可能要使用Ajax调用身份验证方法。不幸的是，您没有提供类声明来显示ApiClass的路由约定，但通常以"api/[Controller]"开头。如果是这种情况，则可以执行以下操作：

$("submitButton").click( 
  function authenticateUser()
  {
    $.post(
      '/api/[COntrollerName]/authentication', // URL
      $('#form").serialize(), // this is your form data as an object
      function(payload) //Response 
      {
        // do something with payload here
      }
    });
  }
);

<button type="submit" class="btn btn-primary" id="submitButton">Login</button>

您可能希望设置您的<button type="button">，以便不提交表格。将click事件附加到该函数，以便它处理api调用。