Unable to pass array of integers to asp.net webapi from angular 7 application

Question

I am trying to pass an array of integer values to the server webapi endpoint via my angular 7 application getDocumentUploadDetailsByIds method. For some reason the endpoint is receiving null value. I have tried several ways but the parameter of the endpoint is null. Could somebody tell me where I am going wrong

Component

  export interface IDocumentIds {
    ids: number[];
    }

          documentIds: IDocumentIds = <IDocumentIds>{};


          this.documentUploadService.createDocumentUpload(this.documents)
                    .then((result) => {
                        if (result) {
                            this.documentIds.ids = Object.keys(result).map(k => result[k]);
                            console.log(this.documentIds);
                            this.getDocumentUploadDetailsByIds(this.documentIds);
                            this.setGridOptions();
                            this.setColumns();
                            this.notify.success('Documents uploaded Successfully');
                        }
                    }).catch(err => {
                        this.notify.error('An Error Has Occured While uploading the documents');
                    });

 public getDocumentUploadDetailsByIds(documentIds) {
        if (this.ManagerStrategyId != null) {
            this.Loading = true;

            this.initGrid();
            this.documentUploadService.getDocumentUploadDetailsByIds(documentIds)
            .then((data) => {
                if (data) {
                    this.DocumentUploadDetails = data;
                    this.Loading = false;
                    this.notify.success('Documents uploaded Successfully');
                }
            }).catch(err => {
                this.notify.error('An Error Has Occured While uploading the documents');
            });
        }
    }

Service

     getDocumentUploadDetailsByIds(documentIds: IDocumentIds) {
                    return this.mgr360CommonService.httpGetByKey('/api/documentupload/detailsByIds' ,  documentIds);
                  }      

const httpPostOptions = {

    headers:
        new HttpHeaders(
            {
                'Content-Type': 'application/json; charset=utf-8',
            }),

    withCredentials: true,
};

        httpGetByKey(url: string, key: any) {

            return this.httpClient.get(this.webApiLocation + url + '/' + key, httpPostOptions)
                .pipe(map((response: Response) => {
                    return response;
                }))
                .toPromise()
                .catch((error: any) => {
                    this.onError(error);
                    return Promise.reject(error);
                });
        }

asp.net web api model

  public class DocumentIdViewModel
    {
       public int[] ids;
    }

Endpoint

 [HttpGet]
            [Route("api/documentupload/detailsByIds/{id}")]
            public IHttpActionResult DetailsByIds(DocumentIdViewModel documentIds)
            {
                var viewModel = GetDocumentUploadDetailsByIds(documentIds);
                return Ok(viewModel);
            }

I have also tried setting the parameter to int array of the web method

From angular

this.getDocumentUploadDetailsByIds(this.documentIds.ids);

On server

 public IHttpActionResult DetailsByIds(int[] documentIds)
        {
            var viewModel = GetDocumentUploadDetailsByIds(documentIds);
            return Ok(viewModel);
        }

I think it is already in the post public class DocumentIdViewModel { public int[] ids; } — Tom
– Tom, Commented Jul 8, 2019 at 10:26
Have you seen that you are actually sending id's in Request Payload - see this in your browser? — StepUp
– StepUp, Commented Jul 8, 2019 at 10:27
in my browser console i can see localhost:56888/api/documentupload/detailsByIds/… — Tom
– Tom, Commented Jul 8, 2019 at 10:29
if i am passing array only from angular then i can see localhost:56888/api/documentupload/detailsByIds/123,124,125 — Tom
– Tom, Commented Jul 8, 2019 at 10:29

StepUp · Accepted Answer · 2019-07-08 11:34:19Z

If you are passing your ids in body, then add [FromBody]:

[HttpPost]
public IHttpActionResult DetailsByIds([FromBody] int[] documentIds)
{
}

Otherwise if you send your IDs in URI:

[HttpPost]
public IHttpActionResult DetailsByIds([FromUri] int[] documentIds)
{
}

UPDATE: In order to get enumerated parameters, then you should create the following query string:

localhost:56888/api/documentupload/DetailsByIds?
    detailsByIds=123&detailsByIds124&detailsByIds125

There is a great article about parameters at MSDN Parameter Binding in ASP.NET Web API

You can use HttpParams class to create parameters. As your parameter name is the same, then you can create a loop. This is a way to pass URL arguments to HTTP request:

import { HttpParams, HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

let params = new HttpParams();
params = params.append('var1', val1);
params = params.append('var2', val2);

this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);

Angular docs about passing parameters to HTTP requst.

UPDATE 1:

Let me show an example how it is possible to add params:

const array = [1, 2, 3, 4, 5];
let params = new HttpParams();
array.forEach(id => {
  params.append('detailsByIds', id);
});

I tried both [FromUri] int[] documentIds and [FromBody] int[] documentIds and both didnt work
in the example you have shared it shows fixed parameters. In my case it could be several values. If I am passing an object then it should be only one parameter right
I am getting error localhost:56888/api/documentupload/detailsByIds/… Unauthorized

Collectives™ on Stack Overflow

Unable to pass array of integers to asp.net webapi from angular 7 application

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related