如何将表单的数据发送到用Angular中的[FromForm]装饰的ASP.NET Core Web API操作?

雷扎·卡尔加(Reza kargar)

这是我在asp core api中的操作:

[Route("[action]"), HttpPost]
[AllowAnonymous]
public async Task<ActionResult> GenerateToken([FromForm]OAuthTokenRequestDto tokenRequest, CancellationToken cancellationToken)
{
    // Some Code
}

OAuthTokenRequestDto:

public class OAuthTokenRequestDto
{
    public string grant_type { get; set; }
    public string username { get; set; }
    public string password { get; set; }
    public string refresh_token { get; set; }
    public string scope { get; set; }

    public string client_id { get; set; }
    public string client_secret { get; set; }
}

这是我的Login.Component.html:


<form class="form-signin" #f="ngForm" (ngSubmit)="signIn(f.value)">

<input type="username" id="inputEmail" name="username" ngModel class="form-control" placeholder="username" required autofocus>

<input type="password" id="inputPassword" name="password" ngModel class="form-control" placeholder="Password" required>


<input type="client_id" id="inputclient_id" name="client_id" ngModel class="form-control" >

<input type="refresh_token" id="inputrefresh_token" name="refresh_token" ngModel class="form-control" >

<input type="scope" id="inputscope" name="scope" ngModel class="form-control" >

<input type="client_secret" id="inputclient_secret" name="client_secret" ngModel class="form-control" >

<input type="grant_type" id="inputgrant_type" name="grant_type" ngModel class="form-control" placeholder="password">

  <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

Login.Component.ts:

import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  invalidLogin: boolean;

  constructor(
    private router: Router,
    private http: HttpClient
    ) { }

  signIn(credentials) {
    return this.http.post('/api/Users/GenerateToken', 
      new OAuth(credentials.username,credentials.password)
        )
      .subscribe(result => {
        if (result)
          this.router.navigate(['/']);
        else
          this.invalidLogin = true;
      });
  }
}

class OAuth {
  grant_type : string;
  username   : string;
  password   : string;
  refresh_token : string;  
  scope   : string;

  client_id   : string;
  client_secret : string;

  constructor (username: string, password : string)
  {
    this.username = username;
    this.password = password;
    this.client_id = "";
    this.refresh_token = "";
    this.scope = "";
    this.client_secret = "";
    this.grant_type = "password";
  }
}

当我尝试将凭据发布到操作中时,出现415错误,但是当我[FromForm]从操作中删除时,它会起作用。

我不知道问题是什么。

注意:我想[FromForm]采取行动

Fei Han

如果您想通过表单字段发布数据,请尝试遵循以下代码段。

signIn(credentials) {
  const formData = new FormData();
  formData.append("username", credentials.username);
  formData.append("password", credentials.password);
  // other fields

  return this.http
    .post("/api/Users/GenerateToken", formData)
    .subscribe(result => {
      //code logic here
    });
}

测试结果

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

.Net Core Web API

基于Accept标头的ASP.NET Core Web API操作选择

ASP.NET CORE Web API-无法触发删除操作(找不到404)

具有许多参数的ASP.Net Core Web API Controller操作

如何使ASP.NET Core Web API操作异步执行?

如何从.Net Core Web API返回Unathorized

.NET Core 2.0 Web API中的BSON

如何从.Net Core Web API返回Json?

如何将多部分/表单数据发送到ASP.NET Core Web API?

如何将数组从Angle 8发送到Web API Core?

Web API .NET Core的返回字符串获取操作

如何将文件从Angular上传到ASP.NET Core Web API

如何将文件发送到列表-.NET Core Web API-邮递员

将List <T>作为可选参数发送到ASP.NET Core Web Api中的帖子正文中

如何将GET请求从Internet Explorer发送到Asp.Net Core API?

如何将对象数组从Angular发送到HttpGet中的Web API Core?

如何从Web API调用ASP.NET Core Web MVC

如何使用angular将文件发送到asp.net Web API?

ASP.Net Web API操作结果

ASP .Net Core Web 应用程序调用 Web API

如何使用 fetch 将 FormData 从 javascript 发送到 ASP.NET Core 2.1 Web API

SignalR:通知从 ASP.NET Core Web API 到 Angular 7 客户端的冗长操作的进度

使用数据创建重置密码链接并发送到电子邮件 ASP.NET Core Web-API

调试asp.net core web API

ASP.Net Core Web API 中的安全用户操作

如何将 JSON 数据发布到 ASP.NET Core Web API 中的控制器?

从 .net core web api Angular 下载 PDF

如何禁用特定 ASP.NET Core 5.0 Web API 操作的自动模型绑定?

如何将包含excel文件的表单数据发送到asp.net core中的控制器