將FormData從Angular傳遞到.NET MVC控制器

Question

我的觀點：

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

因此，當嘗試使用Angular將數據從前端發送到后端.Net控制器中的ActionResult時，遇到了很多問題。

1. 當我使用$ http對象發送$ scope.formData（它會自動加載）時，.Net無法識別數據，因為它沒有被格式化為期望的表格數據。

2. 當我使用FormData JS對象時，出現服務器錯誤：“無效的JSON原語：------ WebKitFormBoundaryzFvk65uKpr0Z7LG1。”

3. 如果我對FormData對象進行字符串化處理，我們將解決第一個問題。

許多其他來源/問題表明，僅將FormData對象傳遞給ajax請求就應該起作用-沒有關於為什么發生2錯誤的信息。

有人知道為什么這會讓人高興嗎？

Answer 1

沒有人提出解決方案，但幸運的是我做到了。 您需要使用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');
});

感謝這篇文章 ，這有助於清除其中的一些內容。