CODEWITHSUNDEEP
angularjsasp.net-mvcasp.net-mvc-5
juliano.net
juliano.net

Reputation: 8177

Parameters on controller always null when submitted via Angular

I'm creating a js object with the same properties as my controller action expects as parameters.

controller.js

(function () {
    'use strict';

    angular
        .module('app')
        .controller('requestController', requestController);

    requestController.$inject = ['$scope', 'lecturesFactory', 'attendeesFactory'];

        $scope.setSelectedLectures = function () {

            var lecture1, lecture2;

            for (var i = $scope.lectures.length - 1; i >= 0; i--) {
                var lecture = $scope.lectures[i];

                if (lecture.selected === true) {
                    if (lecture1 == null) {
                        lecture1 = lecture.lectureId;
                    }
                    else {
                        lecture2 = lecture.lectureId;
                    }
                }
            }

            attendeesFactory.setSelectedLectures($scope.emailAddress.text, lecture1, lecture2).then(function (data) {
                $scope.showInvalidUserMessage = true;
                $scope.message = data.message;
            });
        };

        activate();

        function activate() { }
    }
})();

attendessFactory.js

(function () {
    'use strict';

    angular
        .module('app')
        .factory('attendeesFactory', attendeesFactory);

    attendeesFactory.$inject = ['$http'];

    function attendeesFactory($http) {
        var service = {
            setSelectedLectures: setSelectedLectures
        };

        return service;

        function setSelectedLectures(emailAddress, lecture1, lecture2) {
            var promise = $http({
                method: 'POST',
                url: '/Home/SetSelectedLectures',
                data: {
                    emailAddress: emailAddress,
                    lecture1: lecture1,
                    lecture2: lecture2
                }
            }).then(function (response) {
                console.log(response);
                return response.data;
            });

            return promise;
        }
    }
})();

And my MVC Controller:

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    [HttpPost]
    public IActionResult SetSelectedLectures(SelectedLectureData data)
    {
        // ...
    }
}

public class SelectedLectureData
{
    public String EmailAddress { get; set; }
    public int Lecture1 { get; set; }
    public int? Lecture2 { get; set; }
}

I've tried what some posts on StackOverflow suggested, such as using JSON.stringify, changing the content-type, but I still get the parameter values null (even if I put them directly in the action, instead of using a custom class).

Upvotes: 1

Views: 594

Answers (3)

Prianca
Prianca

Reputation: 484

JSON property name should be same as class properties else it will take it as null

 function setSelectedLectures(emailAddress, lecture1, lecture2) {
        var promise = $http({
            method: 'POST',
            url: '/Home/SetSelectedLectures',
            data: {
                EmailAddress : emailAddress,
                Lecture1: lecture1,
                Lecture2: lecture2
            }
        }).then(function (response) {
            console.log(response);
            return response.data;
        });

Upvotes: 0

Nkosi
Nkosi

Reputation: 247133

Try updating your javascript to 

function setSelectedLectures(emailAddress, lecture1, lecture2) {
    var model = {
            emailAddress: emailAddress,
            lecture1: lecture1,
            lecture2: lecture2
        };
    var data = JSON.strigify(model);
    var promise = $http({
        method: 'POST',
        url: '/Home/SetSelectedLectures',
        data: data
    }).then(function (response) {
        console.log(response);
        return response.data;
    });

    return promise;
}

and using [FromBody] attribute on controller action

[HttpPost]
public IActionResult SetSelectedLectures([FromBody]SelectedLectureData data)
{
    // ...
}

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Use [FromBody] anotation to make it working which will serialize data in SelectedLectureData model.

public IActionResult SetSelectedLectures([FromBody]SelectedLectureData data)

Otherwise you need to do

    var promise = $http({
        method: 'POST',
        url: '/Home/SetSelectedLectures',
        data: JSON.strigify({ "data": {
            emailAddress: emailAddress,
            lecture1: lecture1,
            lecture2: lecture2
        }})
    })

Upvotes: 1

Related Questions