How to access HttpParams in WebApi Controller using [HttpPut] verb

Question

I am trying to update a resource.So, I am trying to access the resource using PUT in angular service.

RollBackBatchById(selectedBatchId: number) {
    const params = new HttpParams();
    params.append('resourceId', resourceId.toString());
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    const httpOptions = { headers: headers };
    return this._httpClient.put(this.base_url + 'api/WebApi/UpdateResource', { params: params })
      .subscribe((res: Response) => {

      });
  }

In my WebApi Controller

[HttpPut]
[Route("UpdateResource")]
public TransactionResult UpdateResource([FromQuery]string resourceId)
{
    var id = resourceId;
}

So, when I'm trying to access my resourceId it is coming as null.And when I am seeing in the network, I couldn't find the resourceId being appended to the URL.

Could anyone please help me with this.

The second parameter for a [put](https://angular.io/api/common/http/HttpClient#put) is the body, not an `HttpParams` object. — R. Richards, Oct 23 '19 at 12:10

score 0 · Answer 1 · edited Oct 23 '19 at 15:17

Got the answer after some research related to HttpParams that they are immutable and stuff.

Useful link when looking through HttpParams Angular 4.3 - HttpClient set params

Resolution is

RollBackBatchById(selectedBatchId: number) {
    const params = new HttpParams().append('resourceId', resourceId.toString()); 
    //chaining the parameters
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    const httpOptions = { headers: headers };
    return this._httpClient.put(this.base_url + 'api/WebApi/UpdateResource',null { params: params })
      .subscribe((res: Response) => {

      });
  }

PUT excepts a body as the second parameter which I am not sending. So changed to NULL
HttpParams are immutable and in turn they return new instance of HttpParam which always be null. That's the reason I changed to the chaining.

Then my url got construction has changed to api/WebApi/UpdateResource?resourceId=XXX

score 0 · Answer 2 · answered Oct 23 '19 at 15:23

In my opinion, you are not using correctly the REST URL definition for PUT method. The URL should be: 'api/WebApi/UpdateResource/id'

So the C# Controller should be:

[HttpPut]
[Route("UpdateResource/{resourceId:int}")]
public TransactionResult UpdateResource([FromUri]int resourceId)
{
    var id = resourceId;
}

There I used int as "resourceId" type of data, here you have all the types available: https://learn.microsoft.com/en-us/aspnet/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2

Then in the Angular code:

RollBackBatchById(selectedBatchId: number) {
    const params = new HttpParams();
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    const httpOptions = { headers: headers };
    return this._httpClient.put(`${this.base_url}api/WebApi/UpdateResource/${selectedBatchId}`, null, { params: params })
      .subscribe((res: Response) => {

   });
}

Try it and tell me if it's work now. Good luck.

It's one of the methods. Even I tried with [HttpPut] also. It worked. I just wanted to try with HttpParams. The above answers works fine — Vijay, Oct 24 '19 at 10:45

How to access HttpParams in WebApi Controller using [HttpPut] verb

2 Answers2