Binding multiple items in ASP.NET MVCIncorporating arrays with

Question

Binding multiple items in ASP.NET MVCIncorporating arrays with

Utilizing Tablesorter and in the process of implementing server-side paging through Ajax. Tablesorter enables sorting on multiple columns and utilizes this URL structure when clicking on the first column:

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

The above scenario functions correctly with my current (Tablesorter) controller action:

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

However, if I solely sort by the second column, the following URL is triggered which leads to a null value for the column parameter. I suspect this is due to a missing zero-index value.

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

Therefore, my inquiry is: Is it possible to model bind the Tablesorter format using a different data type or will adjustments need to be made to Tablesorter's URL pattern?

For sorting by multiple columns, the format should be as follows:

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

javascript asp.net-mvc model-binding tablesorter

Answer 1

Answer №1

Customize the ajax url using the customAjaxUrl option as needed.

Consider utilizing jQuery's $.param() function for assistance.

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 the current format is not suitable, consider adjusting on the server side.

If specifying all columns is necessary, 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 the above solutions do not work, further investigation may be required regarding ASP.NET & model binding. Refer to this answer for additional insights.

Answer 2

Customize the ajax url using the customAjaxUrl option as needed.

Consider utilizing jQuery's $.param() function for assistance.

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 the current format is not suitable, consider adjusting on the server side.

If specifying all columns is necessary, 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 the above solutions do not work, further investigation may be required regarding ASP.NET & model binding. Refer to this answer for additional insights.

Answer 3

Answer №2

Although this may be an older method, I collaborated with Mottie's solution and made some improvements.

customAjaxUrl: function(table, url) {
    // create 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;
    }

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

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

    return url;
},

The declaration of my MVC action looks similar to this:

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

Answer 4

Although this may be an older method, I collaborated with Mottie's solution and made some improvements.

customAjaxUrl: function(table, url) {
    // create 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;
    }

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

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

    return url;
},

The declaration of my MVC action looks similar to this:

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

Binding multiple items in ASP.NET MVCIncorporating arrays with

Answer №1

Answer №2

Similar questions

oidc-client-js consistently redirects users to the login page

how to execute a javascript function in an ionic controller from the template

If I remove my project but still have it saved on my GitHub, do I need to reinstall all the dependencies or can I simply run npm install again?

Creating an IntersectionObserver with the Composition API: A Step-by-Step Guide

Is it possible to utilize multiple .html files in a single view while incorporating Materialize?

Click event not triggering for selected option in jQuery dropdown menu

What is the best way to flatten object literal properties?

Can JavaScript be used to iterate through the id attribute of an image tag?

Is it feasible in Angular2 to add CSS to a component using a service?

Displaying a page with dynamic data fetched from the server-side to be utilized in the getInitialProps method of

What is the process of allocating a function to a question within a POST request?

Tips for optimizing nested object array searches

Tips for importing native JS files on a single page in nuxtJS

Use javascript to retrieve multiple images from the server using XMLHttpRequest

Customize the Width of DropDown List Items with Razor

I am unable to utilize the MQTT.js node package through a CDN

Tips for positioning input fields and labels in both horizontal and vertical alignment

Having trouble setting Camera.rotation in three.js version 73?

Accessing an array within a function from a separate .JS file

display pictures on the screen through the use of web addresses