C# MVC 4: Passing JavaScript array in View to Controller

Question

In MVC 4, how do you pass a JavaScript array in the View to a function in the Controller with AJAX?

This doesn't seem the work:

$.ajax(
        {
            type: "POST",
            url: "../Home/SaveTable",
            data: { function_param: countryArray }
        });

Problem is, countryArray is a global array in the JavaScript View and I've check that it has elements in it before being passed. However, when the saveTable function receives the array, the function says it received a null string[] array.

I only know that passing arrays from the Controller to the View, you serialize complex data types with return Json(data, JsonRequestBehavior.AllowGet); and then de-serialize it by setting it to a "var" variable.

So I probably have to do it for this as well, but how to?

Edit 1:

Here is the shortened version of the SaveTable function:

public string SaveTable(string[] function_param)
{
    if (function_param != null && function_param > 0)
    {
       //some code                
       return "Success";
    }

    //The following code will run if it's not successful. 
    return "There must be at least one country in the Region.";
    //Yeah it's always returning this b/c function_param is null;         
 }

Check your request payload to see if data is really being sent to the controller. — Saravana, Jan 22 '14 at 16:29
@Mark My controller has ActionResult methods for returning Views and methods used to access the database. This is a function used to access the database according to the passed-in array. — RedAces, Jan 22 '14 at 16:30
@Saravana I couldn't find any information on Google to check whether AJAX is actually sending the data, but I think the problem is that C# cannot interpret JavaScript arrays. That may be why it defaults to null. I don't know the syntax to serialize the JavaScript array to JSON so C# can interpret it. — RedAces, Jan 22 '14 at 16:37
Consider using fiddler for checking if the ajax post is sending the array and which format is... — Daniel Conde Marin, Jan 22 '14 at 16:45

score 22 · Accepted Answer · edited May 23 '17 at 12:10

22

You need to set traditional: true when serializing arrays.

$.ajax({
    type: "POST",
    traditional: true,
    url: "../Home/SaveTable",
    data: { function_param: countryArray }
});

Found this good explanation on what traditional: true does: https://stackoverflow.com/a/5497151/2419531

EDIT:

If you don't want to use traditional: true, you can pass the data as string using JSON.stringify and specifying the contentType:

$.ajax({
    type: "POST",
    url: "../Home/SaveTable",
    contentType: 'application/json',
    data: JSON.stringify({function_param: countryArray}),
});

edited May 23 '17 at 12:10

Community

1
1

answered Jan 22 '14 at 16:51

Saravana

37,852
18
100
108

I looked at your link and the answer there implied that the traditional way is obsolete and the new way is better. So what's the benefit of using traditional for serializing arrays? – RedAces Jan 22 '14 at 16:56
2

Anyways, it didn't work, the function is still getting a null string[] array. – RedAces Jan 22 '14 at 17:05
Thanks for the idea! Passing complex data types from the View to the Controller actually turned out to be a difficult task to accomplish (maybe Jon Skeet can do it). I've decided to just turn the array into a string, separated by special characters, in JavaScript to emulate an array, before passing the long-ass string over to the function with AJAX. And then interpreting it in the function. – RedAces Jan 22 '14 at 17:57

score 2 · Answer 2 · answered Aug 22 '15 at 14:22

2

You should use on your controller:

public string SaveTable(object[] function_param)
{
   //some code
}

Should do the work, it's for future users.

answered Aug 22 '15 at 14:22

LP. Gonçalves

454
8
26

score 2 · Answer 3 · answered Dec 21 '17 at 15:05

your Ajax :

$.ajax({
    type: "POST",
    url: "../Home/SaveTable",
    contentType: 'application/json',
    data: {function_param: JSON.stringify(countryArray)},
});

in your controller:

using Newtonsoft.Json;

    public string SaveTable(string function_param)
    {
       dynamic func_param = JsonConvert.DeserializeObject(function_param)
    }

then you will be able to do a foreach in your controller.

C# MVC 4: Passing JavaScript array in View to Controller

3 Answers3

Linked