Passing a data array from Angular to C# Web API

Question

What is the best way to pass a data array from angular to web API C#

Sangeetha S · Answer

Passing a data array from an Angular application to a C# Angular code import { HttpClient } from '@angular\/common\/http'; import { Injectable } from '@angular\/core'; @Injectable({ providedIn: 'root' }) export class DataService { private apiUrl = 'https:\/\/yourapiurl.com\/api\/data'; constructor(private http: HttpClient) {} sendData(dataArray: any[]) { return this.http.post(this.apiUrl dataArray); } } Component import { Component } from '@angular\/core'; import { DataService } from '. @Component({ selector: 'app-your-component' templateUrl: '.\/your-component.component.html' }) export class YourComponent { constructor(private dataService: DataService) {} submitData() { const myDataArray = [1 2 3 4]; this.dataService.sendData(myDataArray).subscribe(response => { console.log('Data sent successfully' response); } error => { console.error('Error sending data' error); }); } } Web api [ApiController] [Route(api/[controller])] public class DataController : ControllerBase { [HttpPost] public IActionResult ReceiveData([FromBody] int[] dataArray) { return Ok(new { message = Data received successfully receivedData = dataArray }); } }

Jayraj Chhaya · Answer

To pass a data array from Angular to a C# Web API you can utilize the HttpClient service in Angular to send a POST request containing the array. The C# Web API can then receive this data as a parameter in the action method. Angular Code import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataService { private apiUrl = 'https://yourapiurl.com/api/data'; constructor(private http: HttpClient) {} sendData(dataArray: any[]) { return this.http.post(this.apiUrl dataArray); } } C# Web API Code [HttpPost] [Route(api/data)] public IActionResult ReceiveData([FromBody] List dataArray) { if (dataArray == null || !dataArray.Any()) { return BadRequest(No data received.); } // Process the data array return Ok(Data received successfully.); } The Angular service sends a data array to the specified API endpoint and the C# Web API method processes the incoming data. Ensure that the API is configured to accept JSON data which is the default behavior when using [FromBody] .