AngularJS формализующая форма

Question

Добрый день. Я новичок в AngularJS и все еще учусь. У меня есть этот код, который я тестирую на том, как сериализовать данные формы. Я использую MVC5 в моем проекте. Значение, которое передается моему контроллеру MVC, - это нулевые значения, не знаю почему.

У меня есть этот код ниже для моего логина

Html

<div class="account-container">
<div class="content clearfix">
    <form ng-app="LoginApp" ng-controller="LoginCtrl" ng-submit="Login()">
        <h1>Login</h1>
        <div class="login-fields">
            <p>Please provide your details</p>
            <div class="field">
                <label for="username">Username</label>
                <input ng-model="Logins.Username" type="text" id="username" name="username" value="" placeholder="Username" class="login username-field" />
            </div> <!-- /field -->
            <div class="field">
                <label for="password">Password:</label>
                <input ng-model="Logins.Password"  type="password" id="password" name="password" value="" placeholder="Password" class="login password-field" />
            </div> <!-- /password -->
        </div> <!-- /login-fields -->
        <div class="login-actions">
            <span class="login-checkbox">
                <input id="Field" name="Field" type="checkbox" class="field login-checkbox" value="First Choice" tabindex="4" />
                <label class="choice" for="Field">Keep me signed in</label>
            </span>
            <button @*ng-click="Login()"*@ type="submit" class="button btn btn-success btn-large">Sign In</button>
        </div> <!-- .actions -->
    </form>
</div> <!-- /content -->

JS

var LoginApp = angular.module("LoginApp", []);

LoginApp.controller("LoginCtrl", function ($scope, $http) {
$scope.Logins = {};
$scope.Login = function () {
    fnLogin(this.Logins);
    console.log(this.Logins)
}

function fnLogin(LogIn) {
    var url = "/Login/Login";
    $http({
        url: url,
        data: LogIn
    }).then(function (response) {
        console.log(response);
        var data = response.data;
        if (data.success)
            window.location.href = data.redirectUrl;
    });
}
});

Контроллер MVC

    public JsonResult Login(LoginDTO login /*string Username, string Password*/)
    {
        if (login.Username == "123" && login.Password == "x")
            return Json(new { success = true, redirectUrl = "/Test/Index" }, JsonRequestBehavior.AllowGet);
        else
            return Json(new { success = true }, JsonRequestBehavior.AllowGet);
    }

Класс

 public class LoginDTO
{
    public string Username { get; set; }
    public string Password { get; set; }
}

Answer 1

Используйте этот файл js. Это будет работать нормально. Но если вам нужны методы PUT, GET и DELETE также с полной функциональностью, дайте мне знать. У меня есть готовый проект для этого, а также таблицы для справки.

var LoginApp = angular.module("LoginApp", []);

LoginApp.controller("LoginCtrl", function ($scope, $http) {
    $scope.Logins = {
        Username : "",
        Password : ""
    };
    $scope.Login = function(){
        $http({
            method : "POST",
            url : '/Login/Login',
            data : angular.toJson($scope.Logins),
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(function (response) {
            console.log(response);
            var data = response.data;
            if (data.success)
                window.location.href = data.redirectUrl;
        });
    }
});

Answer 2

кажется, что вы вызываете функцию Login () дважды *, нет необходимости вызывать ее в ng-click, если тип кнопки "submit" и используется в ng-submit в

Answer 3

Я решаю, используя код ниже

 $http({
        method: "post",
        url: '/Login/Login',
        data: { "login": LogIn}
    })