Passing Javascript array to ASP.NET MVC Controller

Question

I have the following javascript class which I am trying to pass to an ASP.NET MVC Controller

 var postParams = {

         attributes : [
                         {
                            name : '',
                            description: '',
                            attributeType : '',
                            value : ''
                        }
                      ]
    };

 postParams.attributes[0] = new Object();
 postParams.attributes[0].name = "test";
 postParams.attributes[0].description = "test";
 postParams.attributes[0].attributeType = "test";
 postParams.attributes[0].value = "test";

Here's how I call the Controller method:

  var actionURL = "@Url.Action("Save", "Catalog")";
  $.ajax({
                    type: "POST",
                    url: actionURL,
                    data:  postParams   ......

On the Controller side I've declared a ViewModel as follows:

 public class AttributeViewModel
 {
    public string name { get; set; }
    public string description { get; set; }
    public string attributeType { get; set; }
    public string value { get; set; } 
 }

My Controller Save method is declared as follows:

 public JsonResult Save(AttributeViewModel[] attributes)

When I execute the value of attributes is always null.

Any ideas? Not sure how to even start debugging this.

Sanja Melnichuk · Accepted Answer · 2012-04-06T12:14:58.353

6

You can try json.net library to solve your issue

  [JsonFilter(Param = "attributes", JsonDataType = typeof(AttributeViewModel[]))]
  public JsonResult Save(AttributeViewModel[] attributes)

At client:

$.ajax({
        type: 'POST',
        url: url,
        async: true,
        data:  JSON.stringify(attributes), //!!! Here must be the same name as in controller method
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {

        },
        error: function (xhr, ajaxOptions, thrownError) {

        }
    });

edited Apr 06 '12 at 12:14

answered Apr 06 '12 at 11:16

Sanja Melnichuk

3,465
3
25
46

Thanks for the suggestion. Added a reference to Json.net and added the filter but null is still passed to attributes. – Lance Apr 06 '12 at 12:05
Hello I have same issue, I install json.net. Can you help me on where I have to put the `[JsonFilter(Param = "mydata", JsonDataType = typeof(AttributeViewModel[]))]` – touinta Nov 09 '16 at 09:44
I get the error: `The type or namespace name 'JsonFilterAttribute' could not be found` – touinta Nov 09 '16 at 09:53

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

Seems like you need to add traditional : true to the ajax call. Take a look here and here

 $.ajax({ 
                traditional: true,
                type: "POST", 
                url: actionURL, 
                data:  postParams

edited May 23 '17 at 12:14

Community

1
1

answered Apr 06 '12 at 11:19

huysentruitw

27,376
9
90
133

Added in traditional : true but it didn't solve the problem. I've been on this for too long so I'll pass in a comma separated array to the Controller for now. – Lance Apr 06 '12 at 12:06

Passing Javascript array to ASP.NET MVC Controller

2 Answers2