How can I pass a list of objects to an ASP.NET MVC action using jQuery?

Question

I have defined an object type in .NET that I want receive in a List<> as the input to an ASP.NET MVC action method?

Here is the action method and class I'm trying to receive.

public class WhereClause
    {
        public string ColumnInformation { get; set; }
        public string WhereValue { get; set; }
        public string AndOr { get; set; }
        public string Comparer { get; set; }
    }

    public ActionResult Grid(string query, int skip = 0, int take = 50,  List<WhereClause> whereClauses = null)
    {
        GridViewModel gvm = new GridViewModel();
        gvm.Query = query;

And here is the Javascript where I'm building up the collection from a set of table rows using jQuery and then calling the jQuery ajax() method.

var whereClauses = [];

    // Iterate over every row in the table and pull the values fromthe cells.
    divQueryWidget.find('.tblWhereClauses tr').each(function (x, y) {
        var tds = $(y).find('td');
        var columnInformation = $(tds[0]).html();
        var whereValue = $(tds[1]).html();
        var andOr = $(tds[2]).html();
        var comparer = $(tds[4]).html();

        // Create a whereClause object
        var whereClause = {};
        whereClause.ColumnInformation = columnInformation;
        whereClause.WhereValue = whereValue;
        whereClause.AndOr = andOr;
        whereClause.Comparer = comparer;

        whereClauses.push({
            ColumnInformation: columnInformation,
            WhereValue: whereValue,
            AndOr: andOr,
            Comparer: comparer
        });

    });

    //divQueryWidget.find('#queryResultsGrid').
    $.ajax({
        type: 'GET',
        url: '<%= Url.Action("Grid", "Query") %>',
        dataType: 'html',     
        data: { query: divQueryWidget.find('#activeQuery').val(), whereClauses: whereClauses },
        success: function (data, textStatus, XMLHttpRequest) { divQueryWidget.find('#queryResultsGrid').append(data); divQueryWidget.find('.loading').css('visibility', 'hidden'); }
    });

Here is where things get interesting. When the javascript is called and there were two rows in the table that are supposed to be passed to the MVC action, notice how when I debug into the code that there were two objects created in the list but their properties weren't filled.

What am I doing wrong that is preventing my Javascript object from being converted into a .NET List<> type? Should I be using array? Do I need to mark something as serializable?

Answer 1

It might have something to do with the name of the fields of the objects being enclosed in parentheses when sent by Jquery (you can confirm this in Firebug).

Answer 2

i'd be interested in the results. i never tried to post such big chuncks of data with jQuery Ajax, but i guess it should be possible.

i think the problem here is about the labels. when you make a List<> of items, in a normal view, with a foreach loop for example, the labels of the values have keys. you are missing those keys, and i think thats why it doesnt work.

for example, i have a List which i make with jQuery, but send in a normal postback.

in the FormCollection object i get the following keys

    [0] "Vrbl_Titel"    string
    [1] "Sch_ID"    string
    [2] "Vragen[0].Evvr_Vraag"  string
    [3] "Vragen[0].Evvr_Type"   string
    [4] "Vragen[1].Evvr_Vraag"  string
    [5] "Vragen[1].Evvr_Type"   string
    [6] "Vragen[2].Evvr_Vraag"  string
    [7] "Vragen[2].Evvr_Type"   string

a Vragen object has 2 strings, as you can see, so this is how it looks, and i guess this is how you have to make it in jQuery, before posting it to the server.

be careful though, the integer between the brackets should be without interruption. if you have an interruption (for example, 0 1 2 4 5 6) then MVC will stop at 2.