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;         
 }

Solution 1

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}),
});

Solution 2

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.

Solution 3

You should use on your controller:

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

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

Comments

[Mark S]

what's the controller look like?

[Saravana]

Check your request payload to see if data is really being sent to the controller.

[RedAces]

@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]

@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.

[Daniel Conde Marin]

Consider using fiddler for checking if the ajax post is sending the array and which format is...

[Ryan Dooley]

function_param > 0 should be function_param.Length > 0

[RedAces]

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]

Anyways, it didn't work, the function is still getting a null string[] array.

[RedAces]

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.