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

您的数据绑定到变量＆＃39;行＆＃39;。请尝试以下方法：

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

然后在你的后端找到帖子键＆＃39;行＆＃39;。你获取http类和url字符串的代码很好。

如何将表单提交给ASP.Net核心API控制器

1 个答案: