如何从Angular读取数据到Asp.net Core

Question

I have another query

I don't fully understand how to pass Data that comes from angular to asp.net core web api.

This is the Html code of the angular

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <!-- <input formControlName="first" [(ngModel)]="value"> -->
    <mat-form-field>
      <input matInput formControlName="first"  [matDatepicker]="startDate" placeholder="Start date">
      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
      <mat-datepicker #startDate  ></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
        <input matInput formControlName="second"   [matDatepicker]="endDate" placeholder="End date">
        <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
        <mat-datepicker #endDate  ></mat-datepicker>
      </mat-form-field>
    <div class="form-group">
      <button class="btn btn-primary">Submit</button>
  </div>
  </form>

And this is the .ts code

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl,  } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-data-correction',
  templateUrl: './data-correction.component.html',
  styleUrls: ['./data-correction.component.css']
})
export class DataCorrectionComponent implements OnInit {
  selectedDate = new Date();
  form = new FormGroup({
    first: new FormControl(),
    second: new FormControl()
  });

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .subscribe(res => {
      console.log(res);
      alert('SUCCESS !!');
    })
  }

}

The angular form was able to call the web api.

But how can i read the data passed? I tried to use the code below to read the contents

[HttpPost("DataCorrection")]
    public void DataCorrection([FromBody] object data)
    {
        try
        {
            //read the content
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
            Console.WriteLine(ex.StackTrace);
            throw ex;
        }
    }

I was able to read the data passed. But using object as the type but when i use a class that has property

public class DataCorrectionDto
    {
        public string StartTime { get; set; }
        public string EndTime { get; set; }
    }

The contents is null.

How do i do it properly? Thank you.

Answer 1

This is because your form names the fields startDate and endDate . While your backend expects the properties StartTime and EndTime .

Solution one: Rename the form-control-names (frontend) to startTime and endTime .

Solution two: Rename the properties in your DataCorrectionDto (backend) to StartDate and EndDate

Solution three: Create a pojo accessing the form fields to get the values

this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', { startTime: this.form.controls['startDate'].value, endTime: this.form.controls['endDate'].value })
    .subscribe(res => {
      console.log(res);
      alert('SUCCESS !!');
    })

If you don't know why this didn't work before, I would recommend to read a little about ModelBinders and how they work in ASP.NET Core .