Array not passing from Javascript to MVC

Question

I'm trying to pass an array from javascript back into my MVC app. There is a console.log(selected) in the javascript and it outputs an array of data:

["<img src="https://owlexpress.kennesaw.edu/stugifs/open.gif">", "MATH 1190/01 - Calculus I", "84528", "       4.000", "Full Term", "40", "34", "6", "0", "0", "0", "Kennesaw Campus", "Classroom - 100%", "Mathematics &amp; StatisticsRoom 108", "8:00 am - 9:10 amLecture", "Aug 17, 2015", "Dec 14, 2015", "Xiaohui Rebecca  Shi (P)", ""]

But when the breakpoint in the controller hits I see that selectedClassesArray == null

Javascript:

$('#WatchButton').on('click', function (e) {
    var selected = [];
    $("tr.selected").each(function () {
        $(this).find('td').each(function(){
            selected.push($(this).html());                
        });
    });
    console.log(selected);
    $.ajax({
        type: "POST",
        url: "/ClassSearch/watchClasses",
        // I have tried setting data both ways with the same result:
        //data: { selectedClassesArray: selected },
        data: [selected],
        traditional: true,
        success: function (data) { alert("SUCCESS"); }
    });
});

ViewModel:

public class SelectedClassesArray
{
    public string[] arrayOfClasses { get; set; }
}

Controller ACtion:

//Had to set ValidateInput to false since one of the strings contains < (it errored without this)
[HttpPost, ValidateInput(false)]
    public ActionResult watchClasses(IEnumerable<SelectedClassesArray> selectedClassesArray)        
    { //Breakpoint here shows that selectedClassesArray is null
        foreach (var item in selectedClassesArray)
        {
            Console.WriteLine(item.ToString());
        }
        return View();
    }

Answer 1

Your action is expecting a List of arrays:

watchClasses(IEnumerable<SelectedClassesArray> selectedClassesArray)  

You probably want to get only the array, which is in the view model:

watchClasses(SelectedClassesArray selectedClassesArray)  

And what @taxicala said makes sense, try passing only the array, not an array inside another array:

data: { selectedClassesArray: selected }

The posted property name must match the view model parameter's name.

Answer 2

Did you try:

$.ajax({
    type: "POST",
    url: "/ClassSearch/watchClasses",
    // I have tried setting data both ways with the same result:
    //data: { selectedClassesArray: selected },
    data: selected,
    traditional: true,
    success: function (data) { alert("SUCCESS"); }
});

Or perhaps the traditional serialization is failing:

$.ajax({
    type: "POST",
    url: "/ClassSearch/watchClasses",
    // I have tried setting data both ways with the same result:
    //data: { selectedClassesArray: selected },
    data: { selectedClassesArray: selected },
    traditional: false,
    success: function (data) { alert("SUCCESS"); }
});