What is the best way to send an array from Angular 6 to an ASP.NET Core API using the GET method?

When my Angular 6 app makes a request to the ASP.NET Core web API using the GET method, I want to send a list or array of unique identifiers as parameters. In return, I expect only information relevant to those identifiers to be retrieved from the API.

Here is a snippet of my web API code:

[HttpGet]
public ActionResult GetByGuids(List<Guid> Guids)
{
  // Implement some logic here...

  return Ok(_someService.someAction(Guids)); 
  // Pass the Guids as a parameter to the service layer function
}

Based on my research, it seems that I cannot include the array of unique identifiers in the body of the request, as it is a GET method.

The use of [FromQuery] is necessary to prevent errors when dealing with array or list parameters, but I am unsure how to write the corresponding Angular code if this is the only solution.

I would greatly appreciate any assistance or guidance on this matter.

Thank you in advance for your help.

Answer №1

Modify the code from List<Guid> Guids to

[FromQuery]List<Guid> Guids
:

public ActionResult GetByGuids([FromQuery]List<Guid> Guids)

After the update, you can send a request like this:

http://myserver/controller/GetByGuids?Guids=6d627994-dce5-487e-bd2c-d48c0311a2e0&Guids=29a76d51-3c44-4fde-a0f1-b1f34567175e

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There are several ways to input values from JavaScript into ASP controls

Greetings, I am a newcomer to the world of web development, specifically using ASP.NET. I have been struggling with the task of passing or returning a value to display on an HTML element, such as an input field. Despite trying multiple solutions that I fo ...

Having trouble with showing dynamic data in column2 of my HTML layout, and the alignment doesn't look quite right in HTML

I'm working with this HTML file, attempting to create a two-column layout using HTML and CSS. I want one column to be labeled REQUEST and the other RESPONSE. When a value is entered in the text field in Column 1, it should display a response in Column ...

The appearance of a list item (<li>) changes when navigating to a different page within a master page

I encountered an issue where after logging in with a username and password, upon being redirected to the homepage, the login button reappears on all pages instead of remaining hidden until I logout. My goal is for the login button within the <ul> ele ...

What's the best way to fix a div to the bottom left corner of the screen?

I have explored various solutions regarding this issue, but none of them seem to meet my specific requirements. What I am trying to achieve is the correct positioning of a div as depicted in the green area in the image. https://i.sstatic.net/O9OMi.png Th ...

The function slice is not a method of _co

I'm attempting to showcase the failedjobs array<any> data in a reverse order <ion-item *ngFor="let failjob of failedjobs.slice().reverse()"> An issue arises as I encounter this error ERROR TypeError: _co.failedjobs.slice is not a fu ...

Obtain an instance tuple from tuple classes using TypeScript 3.0 generic rest tuples type

When it comes to retrieving the correct instance type from a class type, the process typically involves using the following code: type Constructor<T = {}> = new (...args: any[]) => T class Foo {} function getInstanceFromClass<T>(Klass: Co ...

Launching a NodeJS application through a C# web form application

I have developed a MeteorJS application that I am looking to run as a NodeJS application from within C# code. Here is a Windows Form application serving as a control panel for initiating and terminating the NodeJS application https://i.stack.imgur.com/2R ...

leveraging Angular 2 in combination with an express-node js API

Hello, I’m currently trying to wrap my head around the installation of Angular JS v2. After going through numerous tutorials, I find myself feeling quite confused. Some tutorials mention using webpack to set up a server for the application, while other ...

Having difficulty invoking the forEach function on an Array in TypeScript

I'm currently working with a class that contains an array of objects. export interface Filter { sf?: Array<{ key: string, value: string }>; } In my attempt to loop through and print out the value of each object inside the array using the forE ...

Guide on making a POST ajax request in .NET Core 2.0 and handling the data response

My goal is to implement an ajax call in .NET Core 2.0. I have included the cshtml file and method below after conducting research online. Currently, when I click the CreateNewTwitterData input, "Hello world" is returned as a new page (I have not yet writte ...

Is there any shorthand method for passing a child as a template with a reference to a component in Angular versions 2 and above

I am currently exploring ways to reduce the clutter when passing templates to angular components. Take a look at the code snippet below: <parent> <ng-template #child1><div>Test</div></ng-template> <ng-template #child2 ...

Defining types for functions that retrieve values with a specified default

My method aims to fetch a value asynchronously and return it, providing a default value if the value does not exist. async get(key: string, def_value?: any): Promise<any> { const v = await redisInstance.get(key); return v ? v : def_value; } W ...

Absence of "Go to Definition" option in the VSCode menu

I'm currently working on a Typescript/Javascript project in VSCODE. Previously, I could hover my mouse over a method to see its function definition and use `cmd + click` to go to the definition. However, for some unknown reason, the "Go to Definition" ...

Best practice for importing pipeable RxJs operators in Angular CLI/WebPack rollup

In the earlier versions of Angular CLI, specifically those before 1.5.0, it was common practice to import all RxJs operators and statics into a single file for easy usage throughout the application. For example: rxjs-operators.ts // Statics import &apos ...

Angular: Reveal or conceal targeted rows on click interaction

I have a scenario where I am displaying data in a table with multiple rows. Each row has its own set of data and a button that triggers a function when clicked. <table> <th>Col-1</th> <th>Col-2</th> <th>< ...

Using a Class Decorator in Typescript to Enhance Static Methods across all Classes

Imagine having a class filled with numerous static methods. The objective is to encapsulate each static method within a function. The specific aim is to handle async errors by applying .catch to every static method in the following manner: // Within user-r ...

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

I have developed a service that is supposed to retrieve data from a JSON file and assign it to an array called 'countries', which will be used throughout the application on multiple pages. However, when I call the method getCountries, the countri ...

A service worker of unknown origin is currently getting registered

Currently, I am using the service worker provided in create-react-app. After registering it in index.tsx with serviceWorker.register();, everything seems to be working fine. However, upon closer inspection in the dev tools' Application tab, I noticed ...

What steps can I take to ensure my dynamic route functions correctly in NextJs?

// /home/[storeId]/layout.tsx import prismadb from "@/lib/prismadb"; import { auth } from "@clerk/nextjs/server"; import { redirect } from "next/navigation"; export default async function DashboardLayout({ children, params, ...

React app version displaying incorrect links to CSS and JS files

I have been immersed in a React project called Simple-portfolio, you can find the GitHub repository here: https://github.com/Devang47/simple-portfolio and the live site at this URL: While everything works smoothly on the development server, I encountered ...