How to pass values to WebAPI core methods from Angular UI

Question

I have api method as below

Scenario 1:

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

    }

and calling above api code from angular as below

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

Using the above code in both API & angular, I'm able to pass values from UI to API.

Scenario 2:

But now my requirement is I want to change route of API as below.

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

    }

having just method name as Route. I'm not getting how can I pass angular UI values to this api method.

I tried specifying [FromBody] to params of api method , but didn't worked. From UI, api method always getting null values.

Angular UI code:

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

How to fix this?

you are passing parameters as object so ideally it should be handled using any Model in server side — Shail_bee
– Shail_bee, Commented Dec 22, 2020 at 12:01

Roman Marusyk · Accepted Answer · 2020-12-22 12:00:58Z

2

If you need to pass parameters from URL then you can use

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

and

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

but for POST it is recommended to pass data using request body. Create a new 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);

edited Dec 22, 2020 at 12:00

answered Dec 22, 2020 at 11:55

Roman Marusyk

24.8k27 gold badges83 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dotnet-provoke · Accepted Answer · 2020-12-22 12:15:44Z

1

Scenario 2:

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

    }

The UI Code should be like this (untested):

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

answered Dec 22, 2020 at 12:15

dotnet-provoke

1,64817 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to pass values to WebAPI core methods from Angular UI

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related