将 AngularJS 模型传递给 Web API，模型为空

Question

需要一些建议，我正在尝试在我正在处理的 SPA 项目上创建一个注册/登录部分。

我在前端使用 AngularJS，在后端使用 MVC Web API。

我遇到的问题是，当 Web API 的 POST 方法被命中时，我的模型显示为 null。

这是我的代码：

AngularJS 控制器

SugarGlidersMain.controller('RegisterController', ['$scope', 'UserService', '$location', '$rootScope', 'FlashService', function ($scope,UserService, $location, $rootScope, FlashService) {

$scope.user = [{ID:'',Username:'',Password:'',Email:'',LastLogin:'',Role:'User', FirstName:'',LastName:''}]

$scope.register = function() {
    var data = $scope.user;
    UserService.Create($scope.user)
        .then(function (response) {
            if (response.success) {
                FlashService.Success('Registration successful', true);
                $location.path('/login');
            } else {
                FlashService.Error(response.message);
            }
        });
}

注意：名字，姓氏，密码和电子邮件绑定到html中的输入字段

AngularJS 服务

function Create(user) {
        return $http.post('/api/User', user).then(handleSuccess, handleError('Error creating user'));
    }

注意：用户在发送到 Web API 时包含数据

WebAPI

// POST api/user
    public void Post([FromBody]UserModel user)
    {
        string firstname = user.FirstName;
        string lastname = user.LastName;
    }

MVC 模型

public class UserModel
{
    [DatabaseGenerated(DatabaseGeneratedOption.None)]
    public int ID { get; set; }

    [Required]
    public string Username { get; set; }

    [Required]
    public string Password { get; set; }

    [Required]
    public string Email { get; set; }

    public DateTime? LastLogin { get; set; }

    public string Role { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

将模型传递给 Web API 时数据结构是否重要，例如，我是否可以简单地将用户名、电子邮件和密码传递给 Web API 而没有其他属性并仍然使用 UserModel？

提前谢谢你。

Answer 1

在您当前的情况下，您将 $scope.user 数组传递给 post 但问题是，虽然您在数组中传递了整个数据，但第一个元素控制器方法不会理解该对象，因为它与该方法所期望的实际不同。因此，为了在服务器上获取正确的对象，您应该传递正确的 JSON。

当您将对象传递给 API 时，它应该传递单个用户对象而不是传递整个数组

UserService.Create($scope.user[0])

或

最好将用户对象声明更改为对象

$scope.user = {ID:'',Username:'',Password:'',Email:'',LastLogin:'',Role:'User', FirstName:'',LastName:''};