Angular2を使用してASP.NETコントローラにデータを送信する方法

Question

私はCreateアクションを持つコントローラを持っています。その目的はファイルフォームから名前とデータを受け取り、IndexViewModel返信IEnumerable<File>ファイルです。

public class HomeController : Controller 
{ 
    static List<Models.File> files = new List<Models.File>(); 

    public HomeController() { } 

    [HttpGet] 
    public IActionResult Index() => View(new IndexViewModel { Files = files }); 

    [HttpGet] 
    public IActionResult Create() => View(); 

    [HttpPost] 
    public IActionResult Create(IFormFile file) 
    { 
     var filename = 
      ContentDispositionHeaderValue.Parse(file.ContentDisposition) 
             .FileName; 

     using (var reader = new StreamReader(file.OpenReadStream())) 
     { 
      var content = reader.ReadToEnd(); 
      files.Add(new Models.File { Name = filename, Data = content }); 
     } 

     return RedirectToAction(nameof(Index)); 
    } 
} 

私は、静的なHTML でフォームを使用する場合、それはサーバがデータを受信し、大丈夫です。しかし、同じフォームをAngular2テンプレートで使用しても、それはありません。

import {Component} from 'angular2/core'; 
import {File} from './file'; 


@Component({ 
    selector: 'listfile', 
    template: ` 
<form method="post" asp-action="Index" asp-controller="Api/File" enctype="multipart/form-data"> 
    <input type="file" name="files" #newFile (keyup.enter)="addFile(newFile.value)" 
    (blur)="addFile(newFile.value); newFile.value='' "> 
    <input type="submit" value="Upload" /> 
</form> 
    <table class="table"> 
     <th>id</th><th>name</th> 
     <tr *ngFor="#file of files"> 
      <td>{{file.id}}</td> 
      <td>{{file.name}}</td> 
     </tr> 
</table> 
    ` 
}) 
export class ListFileComponent { 
    files = [ 
     new File(1, 'file1'), 
     new File(2, 'file2') 
    ]; 
    addFile(newFile: string) { 
     if (newFile) { 
      this.files.push(new File(this.files.length + 1, newFile.split(/(\\|\/)/g).pop())) 
     } 
    } 
    falert(value) { 
     alert(value); 
    } 
} 

Answer 1

あなたはAngular2テンプレートとMVC前処理の誤解を持っています。 Here is a postはそれをクリアするかもしれません。 ASP.NETタグヘルパーがサーバーにレンダリングされず、代わりにクライアントに送信されます。

あなたはAngular2のHttpサービスとウェブAPIを使用しなければならない代わりに、form post which passes form dataを使用しています。

あなたは多くのオプションを持っていますが、そのうちの二つは、この時点で最も実用的です：あなたは、その前処理のためにMVCの電源を使用することを選択し、部分図を返すことができます

1. 形。あなたのコンポーネントでは、タグヘルパーを事前処理し、必要に応じて（これは、その後Angular2テンプレートとして役立つであろうHTMLを返します/controller/actionに代わりtemplateとポイントのtemplateUrlを使用しています。
2. あなたはを活用し始めることができますAngular2を真のSPAとし、1つのページだけを提供するためにMVCを使用してください。/home/index。次に、templateUrlを使用して、テンプレートとして使用するローカル.htmlファイルをポイントし、すべてをサポートするAPIを構築します。あなたが必要とするインタラクション。

これは物事をクリアすることを望む！

---

インラインまたはスタティック .htmlを使用する場合は、 のASP.NETタグヘルパーを削除する必要があります。

@Component({ 
    selector: 'listfile', 
    template: ` 
<form (submit)="" > 
    <input type="file" name="files" #newFile (keyup.enter)="addFile(newFile.value)" 
    (blur)="addFile(newFile.value); newFile.value='' "> 
    <input type="submit" value="Upload" /> 
</form> 
    <table class="table"> 
     <th>id</th><th>name</th> 
     <tr *ngFor="#file of files"> 
      <td>{{file.id}}</td> 
      <td>{{file.name}}</td> 
     </tr> 
</table> 
    ` 
}) 
export class ListFileComponent { 
    // ... 
    constructor(private http: Http) { } 
    onSubmit() { 
     const body = JSON.stringify({ this.files }); 
     this.http 
      .post('api/file/create', 
       body, 
       { headers: new Headers({ "Content-Type": "application/json" }) }) 
      .map(response => response.json()) 
      .subscribe(json => { /* handle it */ }); 
    } 
} 

さらに、データをより正確に受け入れるには、APIの署名を変更する必要があります。