AngularJS pass object to controller

Question

Why it's pass null in model variable? Where is mistake?

Controller:

    [HttpGet]
    [AllowAnonymous]
    public JsonResult LoginAngular(LoginViewModel model, string returnUrl)
    {
        Console.WriteLine(model.UserName);
        return Json(model.UserName,JsonRequestBehavior.AllowGet);
    }

Angular:

var login = angular.module('LoginApp', []);
login.controller('LoginCtrl', function ($scope, $http) {
    $scope.name = 'Login';
    $scope.model = { UserName: 'nothing', Password: 'nothing' };
    $scope.model.UserName = "Test";
    $scope.model.Password = 'Test';
    $scope.returnUrl = '/Account/TestLogin';

    $scope.onClick = function () {
        console.log($scope.model);
        $http({
            method: 'GET',
            url: '/Account/LoginAngular',
            params: { model: $scope.model, returnUrl: $scope.returnUrl }
        }).success(function (response) {
            console.log(response);
        });
    };
});

from my understading "get" is for getting data, "post" is for pushing data so you should change that. you are also trying to map an angular model to an mvc model. make sure that the terms defined in your mvc view model match exactly with what you defined in angular — Matt Bodily
– Matt Bodily, Commented May 15, 2016 at 13:30
get request don't have request body, you need and should use POST for operation such as login or registration. — hylimR
– hylimR, Commented May 15, 2016 at 14:08

Conrad Lotz · Accepted Answer · 2016-05-15 14:42:22Z

1

Try the following solution:

  $http({
        url: '/Account/LoginAngular',
        method: "POST",
        data: {model: $scope.model, returnUrl: $scope.returnUrl},
        headers: {  
            "Content-Type": "application/json"  
        }  
    }).then(function(response) {
        // success
    }, 
    function(response) { // optional
        // failed
    });

Alternatively you can try:

   $http.post('/Account/LoginAngular',{model: $scope.model, returnUrl: $scope.returnUrl}) 
       .success(function (data, status, headers, config) {
            //get response
        })
        .error(function (data, status, header, config) {
            //get error details
        });

edited May 15, 2016 at 14:42

answered May 15, 2016 at 14:07

Conrad Lotz

8,9533 gold badges25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

charlietfl Over a year ago

using $.param() assumes jQuery is being used and it shouldn't be used for "application/json" . angular also has a built in serializer that negates needing $.param() if you want to use form encoding. See docs.angularjs.org/api/ng/service/$httpParamSerializerJQLike

Conrad Lotz Over a year ago

Noted. Thank you for the info.

Karthik M R · Accepted Answer · 2016-05-15 15:51:52Z

0

Use POST method to send the data.

var login = angular.module('LoginApp', []);
login.controller('LoginCtrl', function ($scope, $http) {
$scope.name = 'Login';
$scope.model = { UserName: 'nothing', Password: 'nothing' };
$scope.model.UserName = "Test";
$scope.model.Password = 'Test';
$scope.returnUrl = '/Account/TestLogin';

$scope.onClick = function () {
    console.log($scope.model);
    $http({
        method: 'POST',
        url: '/Account/LoginAngular?returnUrl=$scope.returnUrl',
        data: $scope.model,
    }).success(function (response) {
        console.log(response);
    });
  };
});

edited May 15, 2016 at 15:51

answered May 15, 2016 at 14:04

Karthik M R

9901 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS pass object to controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related