0

I am studying angularjs and web.api v2 at the moment.

I am trying to submit a simple javascript object to a web.api 2 controller.
The controller doesn't do much: receives an object and returns it (web.api):

[RoutePrefix("api/v1")]
public class UsersController : ApiController
{
    [HttpPost]
    [Route("users")]
    public IHttpActionResult Save([FromBody] User user)
    {
        return Ok(user);
    }
}

This is the User class (web.api):

public class User
{
    public int Code { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Telephone { get; set; }
    public string Email { get; set; }
}

In my client application I've replicated the object model. My controller returns something like this (angularjs):

vm.user = {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    telephone: '',
    email: ''
};

and this is my view:

<div class="list card" ng-controller="userregistration as vm">
    <div class="list">
    <label class="item item-input item-stacked-label">
        <span class="input-label">Nome:</span>
        <input type="text" placeholder="" ng-model="vm.user.firstName">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Cognome</span>
        <input type="text" placeholder="" ng-model="vm.user.lastName">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Indirizzo</span>
        <input type="text" placeholder="" ng-model="vm.user.address">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Città</span>
        <input type="text" placeholder="" ng-model="vm.user.city">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Telefono:</span>
        <input type="text" placeholder="" ng-model="vm.user.telephone">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Email</span>
        <input type="text" placeholder="" ng-model="vm.user.email">
    </label>
    </div>
    <div class="padding">
    <button class="button button-block button-positive" ng-click="vm.registerUser(vm.user);">Crea Utente</button>
    </div>
</div>

and this is the registerUser method in my controller (angularjs):

vm.registerUser = function (user)
{
    dataService.registerUser(user)
    .then(
        function (result) {
        device.showAlert(result.Code, config.name, 'CONGRATULAZIONI');
        },
        function (reason) {
        device.showAlert(reason, config.name, 'ATTENZIONE');
        }
    );
}

My service module (angularjs) receives the user object and POSTs it to my web.api controller:

function saveUser(token, user)
{
var deferred = $q.defer();

$http({
    method: 'POST', url: config.webAPIsBaseUrl + '/api/v1/users',
    // headers: { 'Authorization': 'Bearer ' + token },
    data: { user: user }
})
.success(function (data, status, headers, config) {
    console.log('saveUser() => success.');
    deferred.resolve(data);
    }
)
.error(function (data, status, headers, config) {
    if (data.Message) {
       console.log('saveUser() => error 1.');
       deferred.reject(data.Message);
       }
    else {
        console.log('saveUser() => error 2.');
        deferred.reject("An error occured while registering user!", status);
       }
    }
);
return (deferred.promise);
}

When I send my user object to my API, my controller cannot de-serialize the user properly.

All the fields are empty.

I've investigated a little bit with fiddler and I've seen that the object is wrapped this way:

{"user":{"firstName":"LeftyX","lastName":"","address":"","city":"","telephone":"","email":""}}

I've tried to remove the user wrapper:

{"firstName":"LeftyX","lastName":"","address":"","city":"","telephone":"","email":""}

and now everything works as expected.

QUESTIONs:

Is there a way to bind the javascript object to my controller's model?

1 Answer 1

2

Instead of passing data: { user: user } to $http(), just pass the user like this...

$http({
    method: 'POST', url: config.webAPIsBaseUrl + '/api/v1/users',
    // headers: { 'Authorization': 'Bearer ' + token },
    data: user
})
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.