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

Question

我还有一个问题

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

这是angular的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 !!');
    })
  }

}

angular形式可以调用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; }
    }

内容为空。

我该如何正确地做到这一点？谢谢。

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 中工作的内容。