How angular works in WebApi asp.net mvc

Question

I´m working on Angular Application Asp.Net MVC and I want to know how to received parameters from view to controller:

View:

<div class="input-group">
    <span class="input-group-addon">
        <i class="fa fa-key"></i>
    </span>
    <input class="form-control" type="password" ng-model="usuario.Pass" autocomplete="off" name="pass" maxlength="30" required validate-on="blur" ng-minlength="8" ng-pattern="/[0-9]+/" />
</div>

<div class="input-group">
    <span class="input-group-addon">
        <i class="fa fa-key"></i>
    </span>
    <input class="form-control" type="password" ng-model="usuario.PassConfirmacion" autocomplete="off" name="passr" maxlength="30" required validator="usuario.PassConfirmacion === usuario.Pass" validate-on="blur" ng-minlength="8" required-message="'El campo es requerido'"
        invalid-message="'Las contraseñas no coinciden'" />
</div>

As you can see I have two input that I want to received in controller

JSController

function cambiarContrasenaCtrl($scope, notificationService, $rootScope, vcRecaptchaService, membershipService, $state, apiService, $window) {
    $scope.usuario = {};
    $scope.cambiarContrasena = cambiarContrasena;

    function cambiarContrasena() {
        $('#recovery').prop('disabled', true);
        $('.page-spinner-bar').removeClass('hide');
        membershipService.cambiarContrasena($scope.usuario, credencialCorrecta, credencialIncorrecta);
    }

MembershipService JS:

(function (app) {
    'use strict';

    app.factory('membershipService', membershipService);

    membershipService.$inject = ['apiService', 'notificationService', '$http', '$base64', '$cookies', '$rootScope', '$localStorage', '$sessionStorage'];

    function membershipService(apiService, notificationService, $http, $base64, $cookies, $rootScope, $localStorage, $sessionStorage) {

        var service = {
            cambiarContrasena: cambiarContrasena,
        }
        var url = window.location.href.split('?Token=')[1];;

        function cambiarContrasena(usuario, completado, fallo) {
            apiService.post('/api/usuario/cambiarContrasena?token='+url, usuario,
            completado,
            fallo);
        }

When I run application and I fill inputs the post action returns me on $scope.usuario input values

Pass:"newpass"
PassConfirmacion:"newpass"

Now I want to know how to get these on my controller

[AllowAnonymous]
[HttpPost]
[ActionName("cambiarContrasena")]
[Route("cambiarContrasena")]
public HttpResponseMessage CambiarContrasena(HttpRequestMessage request, Guid token)
{
    return CreateHttpResponse(request, () =>
    {
        HttpResponseMessage response = null;

        if (ModelState.IsValid)
        {
            _usuarioRecuperacionService.CambiarContrasena(token);
        }
        return response;
    });
}

How can I do it?. Regards

Note: I based my application into: this one

Answer 1

You have to create (POCO) model class in API.

public class UserInfo
{
 public string Pass { get; set; }
 public string PassConfirmacion { get; set; }
}

API POST method

    [AllowAnonymous]
    [HttpPost]
    [ActionName("cambiarContrasena")]
    [Route("cambiarContrasena")]
    public HttpResponseMessage CambiarContrasena(UserInfo model, Guid token)
    {
        //here you can access properties of model
        //model.Pass
        //model.PassConfirmacion
        return CreateHttpResponse(request, () =>
        {
            HttpResponseMessage response = null;

            if (ModelState.IsValid)
            {
                _usuarioRecuperacionService.CambiarContrasena(token);
            }
            return response;
        });
    }

Please ensure your request conentType in $http call , it should be application/json.