通FORMDATA從角到.NET MVC控制器

筆者認爲：通FORMDATA從角到.NET MVC控制器

<form ng-submit="onFormSubmit()"> 
    <div class="form-group"> 
     <label for="Movie_Genre">Genre</label> 
     @Html.DropDownListFor(m => m.Movie.GenreId, new SelectList(Model.Genres, "Id", "Name"), "Select Genre", new { @class = "form-control", ng_model = "formData.Movie.GenreId" }) 
     @Html.ValidationMessageFor(m => m.Movie.GenreId, "The Genre field is required.") 
    </div> 
    <div class="form-group"> 
     <label for="Movie_Stock">Number in Stock</label> 
     @Html.TextBoxFor(m => m.Movie.Stock, new { @class = "form-control", ng_model = "formData.Movie.Stock" }) 
     @Html.ValidationMessageFor(m => m.Movie.Stock) 
    </div> 

    @Html.HiddenFor(m => m.Movie.Id, new { ng_model = "formData.Movie.Id" }) 
    @Html.AntiForgeryToken() 
    <button type="submit" class="btn btn-primary">Save</button> 
</form>

我的角度控制器：

var MoviesAdminEditController = function ($scope, $state, $http) { 
    $scope.formData = {}; 

    $scope.onFormSubmit = function() { 
     // $scope.formData.__RequestVerificationToken = angular.element('input[name="__RequestVerificationToken"]').attr('value'); 

     var formData = new FormData(angular.element('form')); 
     formData.append('__RequestVerificationToken', angular.element('input[name="__RequestVerificationToken"]').attr('value')); 

     $http({ 
      method: 'POST', 
      url: '../../Movies/Save', 
      data: formData, 
      headers: { 
       'enctype': 'multipart/form-data' 
      } 
     }).then(function successCallback(response) { 
      alert('worked'); 
      $state.go('moviesAdmin'); 
     }, function errorCallback(response) { 
      alert('failed'); 
      $state.go('moviesAdmin'); 
     }); 
    } 
}

所以試圖從與角前端發送數據時，我遇到了許多問題，到後端的.Net控制器中的ActionResult。

當我使用$ HTTP對象發送$ scope.formData（這是自動加載），因爲它沒有格式化爲預期的表單數據的.Net不能識別數據。
當我使用FormData JS對象時，出現服務器錯誤：「無效的JSON基元：------ WebKitFormBoundaryzFvk65uKpr0Z7LG1。」
如果我對FormData對象進行了字符串化處理，我們又回到了第一個問題。

許多其他來源/問題的建議剛好路過FORMDATA對象Ajax請求應該努力 - 爲什麼從2誤差正在發生的信息。

任何人都知道爲什麼這是開心？

來源

2016-09-23 aaronmcavinue

沒有人想出解決方案，但幸運的是我做到了。您需要使用jquery $ .ajax方法，該方法接受Angular的$ http沒有的可選參數。最終的代碼如下所示：

var formData = new FormData(angular.element('#new-movie-form')[0]); 

$.ajax({ 
    type: 'POST', 
    data: formData, 
    url: '../../Movies/Save', 
    processData: false, 
    contentType: false, 
    cache: false, 
    dataType: 'json' 
}) 
.done(function() { 
    alert('success'); 
    $state.go('moviesAdmin'); 
}) 
.fail(function() { 
    alert('failed'); 
    $state.go('moviesAdmin'); 
});

由於this article這有助於清除一些這方面了。

來源

2016-09-24 00:31:20 aaronmcavinue

通FORMDATA從角到.NET MVC控制器

回答

相關問題