gliese 581 g gliese 581 g - 28 days ago 7
AngularJS Question

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

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

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>