Question

我还有另一个查询

我不完全了解如何将来自angular的数据传递给asp.net核心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 !!');
    })
  }

}

有角度的形式可以调用网络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中的工作方式。

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

1 个答案: