angularjs $http.post with parameters get null - angularjs

Question

I am using angular for login page but return null parameters to controller.
view page:this my code in view page
<div ng-controller="LoginController">
<form novalidate name="f1" ng-submit="Login()">
<div style="color:rgb(142,2,2)">{{Message}}</div>
<table ng-show="!IsLogedIn">
<!-- Here ng-show="!IsLogedIn" means I want to hide table after loged in-->
<tr>
<td>Username : </td>
<td>
<!-- Here ng-class="Submitted?'ng-dirty':''" Means if submitted (clicked submit button) then make this dirty state
for show red border-->
<input type="text" ng-model="Login.Username" name="cUsername" ng-class="Submitted?'ng-dirty':''" required autofocus />
<span class="error" ng-show="(f1.cUsername.$dirty || Submitted) && f1.cUsername.$error.required">Username required</span>
<!-- ng-show="(f1.cUsername.$dirty || Submitted) && f1.cUsername.$error.required" Means I want to show this span only when
the control cUsername is invalid-->
</td>
</tr>
<tr>
<td>Password : </td>
<td>
<input type="password" ng-model="Login.pass" name="cPassword" ng-class="Submitted?'ng-dirty':''" required autofocus />
<span class="error" ng-show="(f1.cPassword.$dirty || Submitted) && f1.cPassword.$error.required">Password required</span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
</tr>
</table>
</form>
</div>
i need to use the returned value from this factory in other factories.
but get null parametrs
mycontroll.js
angular.module('MyApp')
.controller('LoginController', function ($scope, LoginService) {
$scope.IsLogedIn = false;
$scope.Message = '';
$scope.Submitted = false;
$scope.IsFormValid = false;
$scope.LoginData = {
Username: '',
Password: ''
};
//Check is Form Valid or Not // Here f1 is our form Name
$scope.$watch('f1.$valid', function (newVal) {
$scope.IsFormValid = newVal;
});
$scope.Login = function () {
$scope.Submitted = true;
if ($scope.IsFormValid) {
LoginService.GetUser($scope.LoginData).then(function (d) {
if (d.data.Username != null) {
$scope.IsLogedIn = true;
$scope.Message = "Successfully login done. Welcome " + d.data.Name;
}
else {
alert('Invalid Credential!');
}
});
}
};
})
.factory('LoginService', function ($http) {
var fac = {};
fac.GetUser = function (d) {
return $http({
url: '/login/Login',
method: 'POST',
data: JSON.stringify(d),
headers: { 'content-type': 'application/json' }
});
};
return fac;
});
logincontrol
[HttpPost]
public virtual JsonResult Login(Login d)
{
using (CrudAngularEntities dc = new CrudAngularEntities())
{
var user = dc.Users.Where(a => a.Username.Equals(d.Username) && a.pass.Equals(d.pass)).FirstOrDefault();
return new JsonResult { Data = user, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}

Answer 1

You are passing $scope.LoginData to the function LoginService.GetUser. The corresponding server model is Login. Hence its signature needs to be same.
$scope.LoginData = {
pass : '',
Username: ''
};
Then you mapped the ng-models to something else (to Login obj). You may need to replace inputs for username and password with
<input type="text" ng-model="LoginData.Username"
<input type="password" ng-model="LoginData.pass"