如何从 Angular UI 向 WebAPI 核心方法传递值答案

【问题标题】：How to pass values to WebAPI core methods from Angular UI如何从 Angular UI 向 WebAPI 核心方法传递值
【发布时间】：2020-12-22 11:48:54
【问题描述】：

我有如下api方法

场景 1：

    [HttpPost]
    [Route("CreateRepo/{name}/{location}/{area}/{zone}")]
    public virtual async Task<ActionResult> CreateRepo( string name, string location, string area,  string zone)
    {

    }

并从下面的角度调用上面的api代码

public createRepo(name: any, location: any, 
  area: string, zone: string   ): Observable<any> {  
   
    let header = { headers: new HttpHeaders(
      { 'Access-Control-Allow-Origin': '*' ,
       'Access-Control-Allow-Methods': '*' ,
       'Access-Control-Allow-Headers': '*' }
      ) }; 

   let params =  encodeURIComponent(name)+'/'+encodeURIComponent(location)+'/'+encodeURIComponent(area)+'/'+encodeURIComponent(zone);
   let url = this.baseUrl+"/CreateRepo/"+params;
  return this.httpClient.post<any>(url,header );
}

在 API 和 Angular 中使用上述代码，我可以将值从 UI 传递到 API。

场景 2：

但现在我的要求是我想改变 API 的路由如下。

[HttpPost]
    [Route("CreateRepo")]
    public virtual async Task<ActionResult> CreateRepo( string name, string location, string area,  string zone)
    {

    }

只有方法名称为 Route。我不知道如何将角度 UI 值传递给这个 api 方法。

我尝试将 [FromBody] 指定为 api 方法的参数，但没有奏效。在 UI 中，api 方法总是获取 null 值。

Angular 用户界面代码：

public createRepo(name: any, location: any, 
  area: string, zone: string   ): Observable<any> {  
   
    let header = { headers: new HttpHeaders(
      { 'Access-Control-Allow-Origin': '*' ,
       'Access-Control-Allow-Methods': '*' ,
       'Access-Control-Allow-Headers': '*' }
      ) }; 

   let params =  { name : name, location:location, area:area, zone:zone}
   let url = this.baseUrl+"/CreateRepo/";
  return this.httpClient.post<any>(url, params, header );
}

如何解决这个问题？

【问题讨论】：

您将参数作为对象传递，因此理想情况下应该使用服务器端的任何模型进行处理

标签： c# angular asp.net-core asp.net-web-api

【解决方案1】：

如果你需要从 URL 传递参数，那么你可以使用

[HttpPost("CreateRepo")]
public virtual async Task<ActionResult> CreateRepo([FromRoute]string name, [FromRoute]string location, [FromRoute]string area, [FromRoute]string zone)
{
}

和

let url = this.baseUrl+"/CreateRepo/"+params;

但对于POST，建议使用请求正文传递数据。创建一个新模型

public class Model
{ 
   public string Name { get; set; }
   public string Location { get; set; }
   public string Area { get; set; }
   public string Zone{ get; set; }
}

控制器

[HttpPost("CreateRepo")]
public virtual async Task<ActionResult> CreateRepo([FromBody]Model request)
{   
}

角度：

 let params =  { name : name, location:location, area:area, zone:zone }
 let url = this.baseUrl + "/CreateRepo";
 return this.httpClient.post<any>(url, params, header);

【讨论】：

【解决方案2】：

场景 2：

[HttpPost]
    [Route("CreateRepo")]
    public virtual async Task<ActionResult> CreateRepo( string name, string location, string area,  string zone)
    {

    }

UI 代码应该是这样的（未经测试）：

public createRepo(name: any, location: any, area: string, zone: string   ): Observable<any> {  

let header = { headers: new HttpHeaders(
  { 'Access-Control-Allow-Origin': '*' ,
   'Access-Control-Allow-Methods': '*' ,
   'Access-Control-Allow-Headers': '*' }
  ) }; 
   let url = this.baseUrl+`/CreateRepo/?name=${name}&location=${location}&zone=${zone}`;
  return this.httpClient.post<any>(url, params, header );
}

【讨论】：