Passing AngularJS Model to Web API, Model is Null

Question

In need of some advice, I am trying to create a register/login section on a SPA project I am working on.

I am using AngularJS for the front end and MVC Web API for the back end.

Problem I am having is my model is showing as null when the Web API's POST method is hit.

Here is my code:

AngularJS Controller

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

Note: Firstname, Lastname, Password and Email are bound to input fields in the html

AngularJS service

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

Note: user contains data when being sent to the Web API

WebAPI

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

MVC Model

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

Does the data structure matter when passing a model to web API eg could I simply pass over Username, Email and Password without the other properties to the Web API and still use UserModel?

Thank you in advance.

Pankaj Parkar · Accepted Answer · 2015-07-05 21:34:40Z

1

In you current case you are passing $scope.user array to post but the thing is though you passed whole data in the array first element controller method won't understand that object, because its different than what actually the method is expecting. So for getting correct object on server you should pass correct JSON.

When you are passing object to API it should pass single user object rather than passing the whole array

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

OR

Better change user object declaration to object

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

edited Jul 5, 2015 at 21:34

answered Jul 5, 2015 at 21:28

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing AngularJS Model to Web API, Model is Null

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related