Model binding array in ASP.NET MVC

Question

I'm using Tablesorter and currently implementing server-side paging using Ajax. Tablesorter supports sorting on multiple columns and uses the following URL when clicking on the first column:

http://example.com/tablesorter/json?page=0&size=25&column[0]=1

The above works fine with my (Tablesorter)controller action:

public JsonResult Json(int page, int size, int[] column)

But if I only sort by the second column the following URL is called, which results in column being null. I guess due to a missing zero-index value.

http://example.com/tablesorter/json?page=0&size=25&column[1]=1

So my question is: Can I somehow model bind the given Tablesorter format using some other type or will I have to rewrite Tablesorter's URL format?

When sorting by multiple columns the format is:

http://example.com/tablesorter/json?page=0&size=25&column[0]=1&column[1]=1

Answer 1

You can use the customAjaxUrl option to modify the ajax url however you desire.

Maybe using jQuery's $.param() function would help?

ajaxUrl: 'http://example.com/tablesorter/json?page={page}&size={size}',
customAjaxUrl: function(table, url) {
    // sortList = [[1,0], [2,0]]
    var sort = $.param({ column : table.config.sortList });
    // result: "column[0][]=1&column[0][]=0&column[1][]=2&column[1][]=0"
    return url + '&' + sort;
}

If that format doesn't work, then it might need some server side tweaking?

---

If you MUST have all columns defined, try this code:

ajaxUrl: 'http://example.com/tablesorter/json?page={page}&size={size}',
customAjaxUrl: function(table, url) {
    var i, v,
    c = table.config,
    s = c.sortList; // sortList = [[1,0], [2,0]]
    for (i = 0; i < c.columns; i++){
        v = 2;
        if ($.tablesorter.isValueInArray(i, s)) {
            $.each(s, function(j){ 
                if (s[j] && s[j][0] === i) {
                    v = s[j][1];
                }
            });
        }
        // 0 = ascending; 1 = descending; 2 = unsorted
        url += '&column[' + i + ']=' + v;
    }
    // result: "&column[0]=2&column[1]=0&column[2]=0&column[3]=2&column[4]=2"
    return url;
}

If that doesn't work, then I'm not sure what to tell you then since I don't know much about ASP.NET & model binding. You might want to check out this answer as well.

Answer 2

I know this is an old item, but I worked with Mottie's answer and patched it up a bit.

customAjaxUrl: function(table, url) {
    // build sort list
    var config = table.config;
    var sortList = config.sortList;

    for (var i = 0; i < config.columns; i++){
        var v = 2;

        $.each(sortList, function(j, item){ 
            if (item && item[0] === i) {
                v = item[1];
            }
        });

        // 0 = ascending; 1 = descending; 2 = unsorted
        url += '&sortColumn[' + i + ']=' + v;
    }

    // build filter list
    var filterList = config.pager.currentFilters;

    for (var i = 0; i < filterList.length; i++) {
        url += '&filterColumn[' + i + ']=' + filterList[i];
    }

    return url;
},

My MVC action declaration looks like this

public ActionResult ListByPage(int page, int size, List<int> sortColumn, List<string> filterColumn)
{
}