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

Question

我有另一个问题

我不完全了解如何将来自 angular 的数据传递给 asp.net core web api。

这是角度的 Html 代码

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

}

角度形式能够调用web 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; }
    }

内容为空。

我该怎么做？谢谢你。

标签： angularasp.net-core

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.