2016-04-28 24 views
3

Ich habe einen Controller, der eine Create Aktion hat. Sein Zweck ist es, einen Namen und Daten aus dem Dateiformat zu erhalten, und IndexViewModel geben IEnumerable<File> Dateien zurück.So senden Sie Daten an einen ASP.NET-Controller mit Angular2

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)); 
    } 
} 

Wenn ich ein Formular in statischen html verwenden, es ist in Ordnung, der Server die Daten empfängt. Aber wenn ich das gleiche Formular in einer Angular2 Vorlage verwende, tut es das nicht.

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); 
    } 
} 

Antwort

4

Sie haben eine falsche Vorstellung von der Angular2 Templating und die MVC Vorverarbeitung. Here is a post das könnte das aufklären. Sie haben ASP.NET Tag Helfer, die nicht auf dem Server gerendert werden, und stattdessen an den Client gesendet werden, wie es ist.

Sie die form post which passes form data verwenden, stattdessen sollten Sie die Web API mit Angular2 desHttp-Dienst werden.

Sie haben viele Möglichkeiten, aber zwei von ihnen sind die praktischste an dieser Stelle:

  1. Sie können die Leistung von MVC für seine Vorverarbeitung verwenden wählen und haben eine Teilansicht der Rück bilden. In Ihrer Komponente Sie die templateUrl anstelle des template und verweisen auf die /controller/action verwenden, die die Tag-Helfer Pre-Prozess würde und senden Sie das HTML wie gewünscht (dies dann als Angular2 Vorlage dienen würde.
  2. können Sie beginnen nutzen Angular2 als echtes SPA und nur MVC verwenden, um eine einzelne Seite jemals zu dienen ... /home/index. Dann nutzen Sie die templateUrl auf lokale .html Dateien zu verweisen, die als Vorlage dienen. und eine API bauen aus, die alle unterstützt die Interaktionen, die Sie benötigen

Ich hoffe das klärt auf!


Wenn Sie die inline oder die statische .html verwenden, müssen Sie die ASP.NET Tag Helfer entfernen.

@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 */ }); 
    } 
} 

Dann müssten Sie Ihre API-Signatur ändern, um die Daten genauer zu akzeptieren.

+0

Vielen Dank für die Antwort, habe es, tolle Post! Ich denke, die zweite Option ist schöner. –

Verwandte Themen