Как читать данные приходят из Angular в Asp.net Core

Question

У меня есть другой запрос

Я не до конца понимаю, как передавать данные, поступающие с angular на основные веб-интерфейсы asp.net.

Это HTML-код 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>

И это .ts код

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 !!');
    })
  }

}

Угловая форма смогла вызвать веб-API.

Но как я могу прочитать переданные данные?Я попытался использовать приведенный ниже код для чтения содержимого

[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;
        }
    }

Я смог прочитать переданные данные.Но используя object в качестве типа, но когда я использую класс, обладающий свойством

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

Содержимое равно нулю.

Как мне сделать это правильно?Спасибо.

Answer 1

Это потому, что ваша форма называет поля startDate и endDate.В то время как ваш бэкэнд ожидает свойства StartTime и EndTime.

Решение первое: переименуйте имена элементов управления формы (внешний интерфейс) в startTime и endTime.

Решение второе: Переименуйте свойства в DataCorrectionDto (бэкэнд) в StartDate и EndDate

Решение третье: создайте pojo, обращающийся к полям формы, чтобы получить значения

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 !!');
    })

Если вы не знаете, почему это не сработало раньше, я бы порекомендовал немного прочитать о ModelBinders и о том, как они работают в ASP.NET Core .