C# 如何从用户界面向WebAPI核心方法传递值

我有如下api方法

情景1：

并从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：

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

    }

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

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

    }

只有方法名作为路由。我不明白如何将角度UI值传递给这个api方法

我尝试将[FromBody]指定给api方法的参数，但没有成功。从UI中，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 =  { name : name, location:location, area:area, zone:zone}
   let url = this.baseUrl+"/CreateRepo/";
  return this.httpClient.post<any>(url, params, header );
}

---

如何解决此问题？

如果需要从URL传递参数，则可以使用

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

但对于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);

---

如果需要从URL传递参数，则可以使用

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

但对于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：

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

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

---

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