Angels 4+ appからモデルとファイルのリストを.net MVCコントローラに投稿する方法

Question

Angular 4.2.4から.Net 4.6（MVC 4.0）コントローラにモデルといくつかの添付ファイルを送信しようとしています。 。

サンプルモデル：

//JS model 
{ 
ID: number; 
Name: string 
NewAttachments: any 
} 

//.Net model 
{ 
int ID {get;set;} 
string Name {get;set;} 
HttpPostedFileBase NewAttachments {get;set;} 
} 

の作業例：.NETはうまく形をとり、

saveHealthForm(form: HealthFormModel): Observable<HealthFormModel> { 
    let url = this.UPDATE_HEALTHFROM_URL; 
    return this.http.post(url, form, this.HTTP_OPTIONS) 
     .map(res => { 
     ... 
     }) 
     .catch((error, caught): Observable<HealthFormModel> => { 
      console.error(error); 
      this.onError.emit(error); 
      throw error; 
     }); 
} 


[HttpPost] 
public JsonResult UpdateHealthForm(HealthFormViewModel viewModel) 
{ 
    //view model is not null. 
    //view model contains no attachments. 
    //this works great without attachments 
} 

は、その後、私は添付ファイルを追加したいビューモデルに移入されます。まず、モデルに添付ファイルを追加するだけだと思っていました。しかし、FormDataを使用する必要があることがわかったので、それらを分離してフォームデータ引数として送信しました。

saveHealthForm(form: HealthFormModel, files:FileList): Observable<HealthFormModel> { 
    let formData: FormData = new FormData(); 
    formData.append("viewModel", JSON.stringify(data)); 

    if(files){ 
     for (let i = 0; i < files.length; i++) { 
      formData.append(`files[]`, files[i], files[i].name); 
     } 
    } 

    let url = this.UPDATE_HEALTHFROM_URL; 
    return this.http.post(url, formData, this.HTTP_OPTIONS) 
     .map(res => { 
     ... 
     }) 
     .catch((error, caught): Observable<HealthFormModel> => { 
      console.error(error); 
      this.onError.emit(error); 
      throw error; 
     }); 
} 

    [HttpPost] 
public JsonResult UpdateHealthForm(HealthFormViewModel viewModel, IEnumerable<HttpPostedFileBase> files) 
{ 
    //view model is null :(
    //files are null :(

    //it recieved the viewModel and the files, but i have to parse the viewModel out from json myself. :(
    var myForm = Request.Form.Get("viewModel") 
    //im fine getting files this way, but the method param would be best. 
    var filewrapper = Request.Files.Get("files[]") 
} 

2つのコントローラメソッドを使用して、フォームデータにメソッド引数を設定するにはどうすればよいですか？

編集：モデルがnullでないように

これは、それを作ります。ただし、データは正しく入力されません。それがいるFormDataに渡されたとき

//formData.append("viewModel", JSON.stringify(data)); 
let formData: FormData = new FormData(data); 

添付ファイルはdataオブジェクトの上に位置しています。しかし、それらはモデルにないか、バックエンドでメソッド引数として渡されます。ここで

Answer 1

あなたはWebAPIのに投稿する必要があるサービスコードです：

upload(files, parameters){ 
    let headers = new Headers(); 
    let options = new RequestOptions({ headers: headers }); 
    options.params = parameters; 
    return this.http.post(this._baseURL + 'upload', files, options) 
      .map(response => response.json()) 
      .catch(error => Observable.throw(error)); 

} 

詳細はこちらAngular 4 upload files with data