在 AngularJS 和 MVC 4 中提交表单

Question

我是 AngulaJS 的新手，我正在尝试做尽可能多的例子。我在网上找到了一个示例，除了注册部分外，它运行良好。我试图注册一个用户；它没有提交表单，也没有错误 message/exception.

example.js file

  var example = angular.module('example', ['ngRoute']);

    example.controller('LandingPageController', LandingPageController);
    example.controller('LoginController', LoginController);
    example.controller('RegisterController', RegisterController);

    example.factory('AuthHttpResponseInterceptor', AuthHttpResponseInterceptor);
    example.factory('LoginFactory', LoginFactory);
    example.factory('RegistrationFactory', RegistrationFactory);

    example.config(['$routeProvider','$httpProvider', function ($routeProvider, $httpProvider) {
        $routeProvider.
            when('/routeOne', {
                templateUrl: 'routesDemo/one'
            })
            .when('/routeTwo/:donuts', {
                templateUrl: function (params) { return '/routesDemo/two?donuts=' + params.donuts; }
            })
            .when('/routeThree', {
                templateUrl: 'routesDemo/three'
            })
           .when('/login', {
                templateUrl: 'Account/Login',
                controller: 'LoginController'
            })
           .when('/register', {
               templateUrl: 'Account/Register',
               controller : 'LoginController'
           });


        $httpProvider.interceptors.push('AuthHttpResponseInterceptor');
    }]);

//This is the register form
<form ng-submit="register()">
    <label for="emailAddress">Email Address:</label>
    <input id="emailAddress" type="text" name="emailAddress" ng-model="registerForm.emailAddress" required />

    <label for="password">Password:</label>
    <input id="password" type="text" name="password" ng-model="registerForm.password" required />

    <label for="confirmPassword">Confirm Password:</label>
    <input id="confirmPassword" type="text" name="confirmPassword" ng-model="registerForm.confirmPassword" required />

    <button type="submit">Register</button>
</form>
<div ng-if="registerForm.registrationFailure">
    D'oh!
</div>

这是我的注册工厂

var RegistrationFactory = function ($http, $q) {
    console.log('register controller');
    return function (emailAddress, password, confirmPassword) {

        var deferredObject = $q.defer();

        $http.post(
            '/Account/Register', {
                Email: emailAddress,
                Password: password,
                ConfirmPassword: confirmPassword
            }
        ).
        success(function (data) {
            if (data == "True") {
                deferredObject.resolve({ success: true });
            } else {
                deferredObject.resolve({ success: false });
            }
        }).
        error(function () {
            deferredObject.resolve({ success: false });
        });

        return deferredObject.promise;
    }
}

    RegistrationFactory.$inject = ['$http', '$q'];

注册控制器：

var RegisterController = function ($scope, $location, RegistrationFactory) {
    console.log('register controller');
    $scope.registerForm = {
        emailAddress: '',
        password: '',
        confirmPassword: '',
        registrationFailure: false
    };

    $scope.register = function () {
        var result = RegistrationFactory($scope.registerForm.emailAddress, $scope.registerForm.password, $scope.registerForm.confirmPassword);
        result.then(function (result) {
            if (result.success) {
                $location.path('/routeOne');
            } else {
                $scope.registerForm.registrationFailure = true;
            }
        });
    }
}

RegisterController.$inject = ['$scope', '$location', 'RegistrationFactory'];

这是 C# 控制器中的代码：

   [AllowAnonymous]
        public ActionResult Register()
        {
            return View();
        }

        [HttpPost]
        [AllowAnonymous]
        public ActionResult Register(LoginModel model)
        {
            return Json(new { ok = "ok", data = true, message = "Success" });
        }

这是我正在使用的着陆控制器

var LandingPageController = function ($scope) {
    $scope.models = {
        helloAngular: 'I work!'
    };
};

LandingPageController.$inject = ['$scope'];

这是索引页：

<!DOCTYPE html>
<html ng-app="example" ng-controller="LandingPageController">
<head>
    <title ng-bind="models.helloAngular"></title>
</head>
<body>
    <h1>{{models.helloAngular}}</h1>

    <ul>
        <li><a href="/#/routeOne">Route One</a></li>
        <li><a href="/#/routeTwo/6">Route Two</a></li>
        <li><a href="/#/routeThree">Route Three</a></li>
    </ul>
     <ul>
        <li><a href="/#/login">Login</a></li>
        <li><a href="/#/register">Register</a></li>
    </ul>
    <div ng-view></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
    @Scripts.Render("~/bundles/example")
    </body>
</html>

Answer 1

根据评论，/register 引用了错误的控制器。

改变了这个：

.when('/register', {
               templateUrl: 'Account/Register',
               controller : 'LoginController'
           });

对此：

.when('/register', {
               templateUrl: 'Account/Register',
               controller : 'RegisterController'
           });

在 AngularJS 和 MVC 4 中提交表单

Submitting Form in AngularJS and MVC 4

angularjs

asp.net-mvc-4

angularjs-controller

angularjs-factory