2017-10-09 49 views
0

我正在開發一個帶有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; 

回答

1

您的數據綁定到變量「線」。因此,請嘗試以下操作:

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

然後在您的後端找到帖子鍵'行'。 你的代碼獲取http類和url字符串都很好。

相關問題