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.

Each element of Tags should've been sent as object { TagName:".." } — Dabbas
– Dabbas, Commented Nov 10, 2016 at 12:21
I have updated it as: Tags: [{ TagName: "MVC" }, { TagName: "WCF" }] and the Tags is getting reveived as a list of two objects. However the TagName is null for both objects. — gliese 581 g
– gliese 581 g, Commented Nov 10, 2016 at 12:30

Dabbas · Accepted Answer · 2016-11-11 05:54:45Z

2

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>

edited Nov 11, 2016 at 5:54

answered Nov 10, 2016 at 12:37

Dabbas

3,2588 gold badges51 silver badges78 bronze badges

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

2 Comments

gliese 581 g Over a year ago

Thanks Dabbas! It worked out. I used your above given code. However I had to remove $.toJSON( as you have suggested in the last line.

Dabbas Over a year ago

@gliese581g I updated my answer and removed $.toJSON(

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related