角度如何在WebApi asp.net mvc

时间:2017-04-03 03:02:00

标签: c# angularjs asp.net-web-api

我正在开发Angular Application Asp.Net MVC,我想知道如何从视图到控制器接收参数:

查看:

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

正如您所看到的,我想在控制器中收到两个输入

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

当我运行应用程序并填写输入时,后置操作会返回$scope.usuario输入值

Pass:"newpass"
PassConfirmacion:"newpass"

现在我想知道如何在我的控制器上获取这些

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

我该怎么办?此致

注意:我的应用程序基于:this one

1 个答案:

答案 0 :(得分:1)

您必须在API中创建(POCO)模型类。

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

API POST方法

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

请确保您在$ http电话中的请求为conentType,它应为application/json