CODEWITHSUNDEEP
asp.net-mvcangularjs
Sefa
Sefa

Reputation: 8992

.Net MVC - Submitting the form with AngullarJS

I'm pretty new at AngularJS and i'm trying to use it in my new project. I have made an basic login form. When i submit the form, i'm unable to read the values that AngularJS in sending.

Here is my View

<html>
<head>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link href="~/Style/Style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <title>Welcome to Elara!</title>

    <script>

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

        function formController($scope, $http) {
            $scope.formData = {};

            $scope.processForm = function () {
                $http({
                    method: 'POST',
                    url: 'Home/Login',
                    data: { UserName: $scope.formData.UserName, Password: $scope.formData.Password },
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  
                })
            .success(function (data) {
            console.log(data);

            if (!data.success) {

                //do things here
            } else {
                //do things here
            }
        });
            };
        }

    </script>
</head>
<body ng-app="formApp" ng-controller="formController">
    <div id="FormArea">
        <div id="Login" class="well well-sm">
            <form role="form" ng-submit="processForm()">
                <div class="form-group">
                    <label for="LoginUserName">User Name</label>
                    <input type="text" class="form-control" id="LoginUserName" placeholder="Username" ng-model="formData.UserName">
                    <br />
                    <label for="LoginPassword">Password</label>
                    <input form="LoginPassword" type="password" class="form-control" placeholder="Password" ng-model="formData.Password" />
                    <br />
                    <button type="submit" class="btn btn-default">Login</button>
                </div>
            </form>
        </div>

        <div id="Login">

        </div>
    </div>
</body>
</html>

And my controller

    public bool Login(string UserName, string Password)
    {
        var userName = UserName;
        var password = Password;
        return Login(userName, password);
    }

The problem is username and password is always null. I'm receiving a string like this from post event

Request.Form = {%7b%22UserName%22%3a%22h%22%2c%22Password%22%3a%22h%22%7d}

Upvotes: 0

Views: 477

Answers (1)

ms87
ms87

Reputation: 17492

You're not really submitting a model, rather 2 arguments, so use params instead of data in your $http request:

            $http({
                method: 'POST',
                url: 'Home/Login',
                params: { UserName: $scope.formData.UserName, Password: $scope.formData.Password },
            })

Secondly, I hope you're not trying to post this to an MVC controller, post it to a Web API controller instead.

Upvotes: 1

Related Questions