Sending an array from an Angular component to a .Net Framework ApiController using HttpPost: A quick guide

I am attempting to send an Angular array data to the .Net Framework server side

Here is my current code snippet:

Angular: see below for code

service.ts

   addRecipient(val:any)
    {
      return this.http.post(this.APIUrl+'/recipient',val);
    }

recipient.ts

SendSurveyList: any = []; - list declaration

this.SendSurveyList.push(val); - pushing results

Sending results via server: ->

  this.service.addRecipient(this.SendSurveyList).subscribe(res=>
        {
          alert(res.toString() + "Was Sent");
        });

.Net Framework: see below for code

 // POST api/values
        [HttpPost]
        public HttpResponseMessage Post([FromBody]Recipient postRecipient)
        {
        }
  1. Current Result: HttpPost returning null;
  2. Expecting result: HttPost returning SendSurveyList list data.

My idea:

I have a thought to modify service.ts side post URL like so:

 addRecipient():Observable<any[]>
    {
      return this.http.post(this.APIUrl+'/recipients');
    }

However, this is only valid for http.GET method ~ I need help figuring out how to make it work with http.Post.

I would greatly appreciate any suggestions. I've successfully implemented POST for a single record. But I want to do it for List / Array data as well.

Answer №1

// Creating a POST endpoint for the API values
        [HttpPost]
        public HttpResponseMessage Post([FromBody]List<Recipient> listPostRecipient)
        {
        }

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

Issues with CSS loading on bookmarked pages in Angular 4

Just starting out with Angular and managed to put together a static website, . The site is live on the Internet and functions smoothly with the provided navigation. However, I encountered an issue with bookmarked URLs. First-level bookmarks (e.g. ) work pe ...

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

I am facing an issue with a component in my Next JS website. When I attempt to convert it into a Client Component, the page fails to load in the browser and I encounter the following unhandled runtime exception: SyntaxError: "undefined" is not va ...

What is preventing TypeScript from resolving assignment in object destructuring?

Consider the code snippet below: interface Foo { a?: number b?: number } function foo(options?: Foo) { const { a, // <-- error here b = a } = (options ?? {}) return [a, b] } Why does this code result in the followi ...

Developing a node module that includes nested subfolders

I'm currently working on an npm module and have the following index.ts file: export * from './src/A/index'; Right now, when importing in my app, it looks like this: import {something} from 'myModule'; Now, I want to enhance my ...

Encountered an issue in GoJS with Angular 4: ERROR TypeError: Unable to access property 'class' of null at Function.F.fromJson.F.fromJSON

I have just started exploring GoJS and decided to create a sample project by utilizing the Kanban sample available on the GoJs website. I attempted to use Angular and Typescript for this, but encountered an error. AppComponent.html:1 ERROR TypeError: Cann ...

The issue of why a parameterized query is not functioning despite the procedure working correctly

I am utilizing a specific method to perform data calculations: public static int PrepareData(int year, int month, int calcYear) { using (IfxConnection con = new IfxConnection(ConfigurationManager.ConnectionStrings["testable"].ToStrin ...

Managing Events in ASP.NET

I have developed a server control for ASP.Net. Here is a succinct overview of the steps I follow: (1) Call EnsureChildControls in the OnInit method. (2) Generate a dynamic table in the CreateChildControls method: Table dynamicTable = new Table(); dynami ...

Working with Input stream in ASP.NET Core

I am currently exploring the integration of the library for ASP.NET Core found at https://github.com/infusion/jQuery-webcam in order to capture images from a webcam. Referencing this example from MVC Capture webcam image, save file path of image to the da ...

Testing an asynchronous function in JavaScript can lead to the error message: "Have you neglected to utilize await?"

Here is an example of the code I am working with: public getUrl(url) { //returns URL ... } public getResponseFromURL(): container { let myStatus = 4; const abc = http.get(url, (respon) => const { statusCode } = respon; myStatus = statusCode ...

What is the process for viewing the code of a method designated as MethodImplOptions.InternalCall?

While using ILSpy to analyze the code of System.String, I came across some methods that are labeled as MethodImplOptions.InternalCall, such as: [SecurityCritical] [MethodImpl(MethodImplOptions.InternalCall)] internal static extern int nativeCompareOrdinal ...

Ways to receive a reply from EventEmitter

From the child component, I made a call to a certain method. Here is the code in the child component: @Output() parentEvent = new EventEmitter<any>(); click1() { //calling the specified method from the child this.parentEvent.emit(myObj1); ...

Importing TypeScript Files without the 'Path' Package Available

After spending a few weeks working on Angular Universal, I've come across a common occurrence where Angular Universal projects have a server.ts file located at the root directory. This server.ts file usually includes imports of various TypeScript pac ...

Why does the request body show as null even after passing body data in Prisma?

My application uses Prisma for database storage with MySQL. It is built using Next.js and TypeScript. I have set up the API and it is functioning properly. However, when I try to save data sent through the API, the `request.body` is null. Interestingly, wh ...

Accessing class functions in Angular 2 and Ionic

I'm currently using Ionic with Angular 2 to develop an app. However, I'm facing an issue with the code below as I am unable to access the function leaveGroup(group) within the Dialog promise. leaveGroupTapped(event, group) { this.dialogs.con ...

Revise the document by incorporating its corresponding value included

Looking to make updates to a document depending on its value var filter = Builders<UnitTravelHistory>.Filter.Empty; var update = Builders<UnitTravelHistory>.Update.Set(i => i.JobDuration, i.A-i.B) DBContext.ClientDb.Repository<UnitTrave ...

Maximizing the Potential of ICallBack Event Handler

When dealing with 2 drop down lists, I fill the second DDL on the first DDL selected index changed event using a regular postback in asp.net. However, in this particular situation, I am interested in utilizing the ICallBack event handler instead. Can som ...

What could be causing the itemClicked() function to malfunction intermittently in Ionic2 / Angular2?

The issue at hand One common problem experienced with Angular's (click) functionality is that it may not work properly when <div> tags are utilized. In certain situations, multiple clicks might be required. I encountered the same problem mysel ...

What is the method for converting a JSON string into an [object][object] format using Angular 6?

Is there a way to transform the data shown below into the [[object][object]] structure using Angular 6? resultArray = [{Q_id: "5bbee2fbbb34b98be0464c73", opt_id: 111},{Q_id: "5bbee2fbbb34b98be0464c73", opt_id: 113}] ...

Angular2: The NgFor directive is designed to work with Iterables like Arrays for data binding

I'm currently working on a university project to develop a web application consisting of a Web API and a Frontend that interacts with the API. The specific focus of this project is a recipe website. Although I have limited experience with technologies ...

Create a TypeScript interface that represents an object type

I have a Data Structure, and I am looking to create an interface for it. This is how it looks: const TransitReport: { title: string; client: string; data: { overdueReviews: number; outstandingCovenantBreaches ...