How do I get my WebGrid to POST instead of GET during a sort or paging operation in my MVC4 site?

Question

I have a fairly simple site with a Search partial view and a Listing partial view. They're rolled up using multiple models into the Index view.

Everything is fine. Except when I click the grid column headers to sort or attempt to page to the next listing of data, the grid comes back empty. If I re-submit the same search criteria, then the grid repopulates with all applicable data sorted or paged properly.

I've tracked this behavior down to the fact that the WebGrid sets up it's paging and sorting mechanisms as a GET instead of a POST. So obviously all my model data is left off the submission.

Isn't there a way to get the WebGrid to POST so the data tags along? Seems quite counterproductive for the WebGrid as a class to not include the data one wants to page or sort.

Answer 1

This may not be the most elegant solution, but it works:

Add the model to your Session in the view:

Session.Add( "Model", Model );

Then, in the Index GET Action in your controller (or whatever the GET Action is), just check for the value and call the POST Action:

if ( Session[ "Model" ] != null )
    this.Index( Session[ "Model" ] as MyModel );

Cleanup your Session accordingly.

Answer 2

Old question, but just to add a reference:

I preferred the solution suggested at this link

which solves the problem using JQuery:

var links = $('a[href*=page], a[href*=sort]'), form = $('form');
links.click(function () {
            form.attr("action", this.href);
            $(this).attr("href","javascript:");
            form.submit();
        });

Answer 3

Further to the JQuery answer above (which brought me success, thanks!) don't forget to undelegate the the webgrid's own magic methods that it adds behind the scenes. Otherwise you may end up with another ajax GET occurring at the same time as your POST.

Before binding to the 'page' and 'sort' links do this:-

    $("#MyWebGridID").undelegate();