Tips for accessing HttpParams within a WebApi Controller while utilizing the [HttpPut] method

Question

Tips for accessing HttpParams within a WebApi Controller while utilizing the [HttpPut] method

I am attempting to update a specific resource by accessing it through the PUT method in an 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) => {

      });
  }

Within my WebApi Controller:

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

However, I am encountering an issue where the resourceId is arriving as null when accessed and checking the network activity does not show the resourceId appended to the URL.

If anyone could offer assistance with solving this problem, I would greatly appreciate it.

c#angular typescript asp.net-core

Answer 1

Answer №1

After conducting some research on HttpParams, I discovered that they are immutable.

If you're interested in learning more about HttpParams, check out this helpful link: Angular 4.3 - HttpClient set params

This is the solution:

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 expects a body as the second parameter which I am not sending. So changed it to NULL.
HttpParams are immutable, so they always return a new instance of HttpParam, which will be null. That's why I switched to chaining.

As a result, my URL construction has now become:

api/WebApi/UpdateResource?resourceId=XXX

Answer 2

After conducting some research on HttpParams, I discovered that they are immutable.

If you're interested in learning more about HttpParams, check out this helpful link: Angular 4.3 - HttpClient set params

This is the solution:

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 expects a body as the second parameter which I am not sending. So changed it to NULL.
HttpParams are immutable, so they always return a new instance of HttpParam, which will be null. That's why I switched to chaining.

As a result, my URL construction has now become:

api/WebApi/UpdateResource?resourceId=XXX

Answer 3

Answer №2

I believe there might be an issue with how you are defining the REST URL for the PUT method in your code. To address this, I recommend updating the URL to: 'api/WebApi/UpdateResource/id'

Here is an example of how the C# Controller should look:

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

In this snippet, I used int as the data type for "resourceId". For more available types, refer to this link: https://learn.microsoft.com/en-us/aspnet/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2

Next, let's take a look at 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) => {

   });
}

Please give it a try and let me know if this adjustment resolves the issue. Best of luck.

Answer 4

I believe there might be an issue with how you are defining the REST URL for the PUT method in your code. To address this, I recommend updating the URL to: 'api/WebApi/UpdateResource/id'

Here is an example of how the C# Controller should look:

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

In this snippet, I used int as the data type for "resourceId". For more available types, refer to this link: https://learn.microsoft.com/en-us/aspnet/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2

Next, let's take a look at 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) => {

   });
}

Please give it a try and let me know if this adjustment resolves the issue. Best of luck.

Tips for accessing HttpParams within a WebApi Controller while utilizing the [HttpPut] method

Answer №1

Answer №2

Similar questions

When trying to gather multiple parameters using @Param in a NestJS controller, the retrieved values turn out

Creation of Card Component with React Material-UI

Setting a TypeScript collection field within an object prior to sending an HTTP POST request

The creation of a fresh child instance in Typescript using rest parameters

The React table column definition inexplicably transforms into a string

What could be causing the 404 error when trying to make a get-request to fetch a list of all users?

Execute Internet Explorer as a distinct user through Selenium

Dynamic placeholder modification depending on form selection

Running Jenkins in a Docker container to initiate the process of building an Angular application within a

Error: Report viewer tag not found in Visual Studio 2015 toolbox

What is the method for showing the number of characters in a string within a textfield by utilizing events in Angular

Choosing the primary camera on a web application with multiple rear cameras using WebRTC

What is the best way to save the output of an asynchronous function into a class attribute?

Assistance needed: How to add extra information when registering a user on JHipster?

Retrieving the component's values when utilizing the `<ng-content>` directive

Setting up Typescript error handling for next-auth getProviders configuration

Elevate a counter value within a nested for loop in Angular framework

Ensure that the background view remains interactive while adding an overlay on top for an enhanced user experience

Encountering TypeScript error TS2339 while mocking a React component with Jest

Prevent user input when an alert window is open