Pass a list of objects to MVC action method using AngularJS post

Question

I have an action method as given below:

[HttpPost]
    public ActionResult Ask(Question question)
    {
        if (ModelState.IsValid)
        {
            TempData["NewQuestion"] = question;
            return RedirectToAction("Submit");
        }
        return View(question);
    }

The Question class definition is given below:

public class Question    
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Body { get; set; }
    public string UserId { get; set; }
    public List<Tag> Tags { get; set; }
    public int Votes { get; set; }
    public List<Answer> Answers { get; set; }
    public int Views { get; set; }
    public DateTime CreationDate { get; set; }
}

The code which I have written to call the above given action method is as given below:

<script>
        function questionController($scope, $http) {            
            $scope.submit = function () {                
                var data = $.param({
                    Title: $scope.title,
                    Body: $scope.body,
                    Tags: [$.param({ TagName: 'MVC' }), $.param({ TagName: 'WCF' })]
                });
                var config = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                    }
                };
                $http.post('Ask', data, config)
                    .success(function (data, status, headers, config) {
                        $scope.PostDataResponse = data;
                    })
                    .error(function (data, status, header, config) {
                        alert(data);
                    });
                };
        }
        var queApp = angular.module("queApp", []);
        queApp.controller("queCtrl", questionController);
    </script>

The action method is being called but the Tags member which is a list is received as null. Please let me know what I am doing wrong.

Answer 1

Try changing Content-Type value to application/json

<script>
    function questionController($scope, $http) {            
        $scope.submit = function () {                
            var data =  {
                Title: $scope.title,
                Body: $scope.body,
                Tags: [{ TagName: 'MVC' }, { TagName: 'WCF' }]
            };
            var config = {
                headers: {
                    'Content-Type': 'application/json;charset=utf-8;'
                }
            };
            $http.post('Ask', data, config)
                .success(function (data, status, headers, config) {
                    $scope.PostDataResponse = data;
                })
                .error(function (data, status, header, config) {
                    alert(data);
                });
            };
    }
    var queApp = angular.module("queApp", []);
    queApp.controller("queCtrl", questionController);
</script>