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

Question

我有 api 方法如下

场景 1：

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

    }

并从 angular 调用上面的 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。 我不知道如何将 angular 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 );
}

如何解决这个问题？

Answer 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 ，建议使用请求体传递数据。 新建一个 model

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

Controller

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

Angular：

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

Answer 2

场景 2：

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

    }

用户界面代码应该是这样的（未经测试）：

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