将FormData从Angular传递到.net MVC控制器

Pass FormData from Angular to .NET MVC Controller

本文关键字：net MVC 控制器 FormData Angular      更新时间：2023-09-26

My View:

<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>

My Angular Controller:

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时。. net不能识别这些数据，因为它没有被格式化为预期的form-data。

  2. 当我使用FormData JS对象时，我得到服务器错误:"无效的JSON原语:------WebKitFormBoundaryzFvk65uKpr0Z7LG1。"

  3. 如果我将FormData对象字符串化，我们又回到了第一个问题。

许多其他来源/问题表明，只是传递FormData对象到ajax请求应该工作-没有关于为什么从2错误的信息。发生。

有人知道为什么会这样吗?

没有人想出解决办法，但幸运的是我做到了。您需要使用jquery $。方法，它接受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');
});

感谢这篇文章，它帮助澄清了一些问题。

相关文章：