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

我正在开发一个带有ASP.Net Core 2.0和C＃的Angular 2应用程序。如何将表单提交到ASP.Net核心API控制器

我是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;

来源

2017-10-09 VansFannel

您的数据绑定到变量“线”。因此，请尝试以下操作：

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

然后在您的后端找到帖子键'行'。你的代码获取http类和url字符串都很好。

来源

2017-10-09 10:40:36

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

回答

相关问题