使用 AngularJS 将数据从视图传递到 net-mvc 控制器

Question

 public class Home
{
    string CustEmail { get;set;}
    string CustName { get; set;}

    int id { get; set;}
}

型号

[HttpPost]
    public void CreateCustomer(Home cust)
    {
        if (ModelState.IsValid)
        {

        }

    }

控制器

angular.module('myFormApp', []).controller('CustomerController', function ($scope, $http, $location, $window) {
    debugger;
    $scope.cust = {};
    $scope.message = '';
    $scope.result = "color-default";
    $scope.isViewLoading = false;

    //get called when user submits the form
    $scope.submitForm = function () {
        $scope.isViewLoading = true;
        console.log('Form is submitted with:', $scope.cust);
        //$http service that send or receive data from the remote server

        var cust = {
            CustEmail: $scope.cust.CustEmail,
            CustName: $scope.cust.CustName,
            id: 1,
        };

        $http(
        {
            method: 'POST',
            url: '/Home/CreateCustomer',
            data: cust,
        }).then(function (data, status, headers, config) {
            $scope.errors = [];
            if (data.success === true) {
                $scope.cust = {};
                $scope.message = 'Form data Submitted!';
                $scope.result = "color-green";
                $location.path(data.redirectUrl);
                $window.location.reload();
            }
            else {
                $scope.errors = data.errors;
            }
        })
        $scope.isViewLoading = false;
    }
}).config(function ($locationProvider) {
  //default = 'false'
  $locationProvider.html5Mode(true);
});

我在前端以正确的格式获取数据，并且回传调用也在工作，但我无法在 MVC 控制器中获得价值。我不知道我做错了什么。我尝试在控制器中使用单个项目，然后它工作正常，但我只希望通过模型。

Answer 1

promise 的 .then 方法只公开一个值，而不是四个值。

$http(
{
    method: 'POST',
    url: '/Home/CreateCustomer',
    data: cust,
̶}̶)̶.̶t̶h̶e̶n̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶
}).then(function (response) {
    var data = response.data;
    var status = response.status;
    var headers = response.headers;
    var config = response.config;
    $scope.errors = [];
    if (data.success === true) {
        $scope.cust = {};
        $scope.message = 'Form data Submitted!';
        $scope.result = "color-green";
        $location.path(data.redirectUrl);
        $window.location.reload();
    }
    else {
        $scope.errors = data.errors;
    }
})

有关详细信息，请参阅

• AngularJS $http Service API Reference - returns

---

更新

您可以添加一个.catch 块来控制台记录任何错误：

$http(
{
    method: 'POST',
    url: '/Home/CreateCustomer',
    data: cust,
̶}̶)̶.̶t̶h̶e̶n̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶
}).then(function (response) {
    var data = response.data;
    var status = response.status;
    var headers = response.headers;
    var config = response.config;
    $scope.errors = [];
    if (data.success === true) {
        $scope.cust = {};
        $scope.message = 'Form data Submitted!';
        $scope.result = "color-green";
        $location.path(data.redirectUrl);
        $window.location.reload();
    }
    else {
        $scope.errors = data.errors;
    }
    console.log("OK:", response.data);
}).catch(function(response) {
    console.log("ERROR:", response);
});