javascript - 如何向 ASP.Net Core API Controller 提交表单

Question

我正在使用 ASP.Net Core 2.0 和 C# 开发 Angular 2 应用程序。

我是 Angular 2 的新手，我一直在阅读 Angular - Forms文档和搜索，但我还没有找到如何将表单发送到 ASP.Net Api。

现在，我的问题是如何获取表单数据并使用 http.post 发送它。

Html代码:

<h1>L&iacute;neas</h1>

<p>This component demonstrates fetching data from the server.</p>

<p *ngIf="!lines"><em>Loading...</em></p>
<form (ngSubmit)="onSubmit()" #lineForm="ngForm">
    <table class='table' *ngIf="lines">
        <thead>
            <tr>
                <th>Line Id</th>
                <th>Name</th>
                <th>Line Reference Id</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let line of lines">
                <td>{{ line.lineId }}</td>
                <td><input [(ngModel)]="line.name" placeholder="name" required name="name-{{line.lineId}}"></td>
                <td><input [(ngModel)]="line.lineReferenceId" placeholder="lineReferenceId" name="lineReferenceId-{{line.lineId}}" required></td>
            </tr>
        </tbody>
    </table>

    <button type="submit" class="btn btn-success">Submit</button>
</form>

TypeScript 代码:

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'line',
    templateUrl: './line.component.html'
})
export class LineComponent {
    public lines: Line[];
    private baseUrl: string;
    private http: Http;

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.http = http;
        this.baseUrl = baseUrl;

        http.get(baseUrl + 'api/Line').subscribe(result => {
            this.lines = result.json() as Line[];
        }, error => console.error(error));
    }

    onsubmit() {
        this.http.post(this.baseUrl + 'api/Line/Save', JSON.stringify(this.data))
            .subscribe(result => { }, error => console.error(error));
    }
}

interface Line {
    lineId: number;
    name: string;
    lineReferenceId: string;
}

我的问题在这里:this.http.post(this.baseUrl + 'api/Line/Save', JSON.stringify(this.data))。我不知道如何获取表单数据:this.data 不存在。

如何获取表格？

顺便说一句，我不知道这是否是在构造函数中获取基本 url 和 http 客户端的正确方法:

this.http = http;
this.baseUrl = baseUrl;

Answer 1

您的数据绑定(bind)到变量“lines”。因此请尝试以下操作:

onsubmit() {
    this.http.post(this.baseUrl + 'api/Line/Save', JSON.stringify({ lines: lines }))
        .subscribe(result => { }, error => console.error(error));
}

然后在您的后端找到帖子键“lines”。您获取 http 类和 url 字符串的代码很好。