Asp.net-mvc – How to get the WebGrid to POST instead of GET during a sort or paging operation in the MVC4 site

asp.net-mvcasp.net-mvc-4postbackwebgrid

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.

Best Answer

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();
        });

Related Solutions

Ajax – Asp Mvc3 webgrid Paging and Filtering by ajax

Seeing as the grid generates an onclick call for each pager item (and column header) couldn't you just use jQuery to replace default values with a call to an Ajax method that passes the form back?

Paging/Sorting not working on web grid used in Partial View

The following example works fine for me.

Model:

public class MyViewModel
{
    public string Bar { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Foo(string value)
    {
        var model = Enumerable.Range(1, 45).Select(x => new MyViewModel
        {
            Bar = "bar " + value + " " + x
        });
        return PartialView(model);
    }
}

Index.cshtml view:

<script type="text/javascript">
    $(function () {
        $('#myddl').change(function () {
            var url = $(this).data('url');
            var value = $(this).val();
            $.ajax({
                url: url,
                type: 'GET',
                cache: false,
                data: { value: value },
                success: function (result) {
                    $('#result').html(result);
                }
            });
        });
    });
</script>

@Html.DropDownList(
    "id",
    new[] {
        new SelectListItem { Value = "val1", Text = "value 1" },
        new SelectListItem { Value = "val2", Text = "value 2" },
        new SelectListItem { Value = "val3", Text = "value 3" },
    },
    new {
        id = "myddl",
        data_url = Url.Action("Foo", "Home")
    }
)

<div id="result">
    @Html.Action("Foo")
</div>

Foo.cshtml partial:

@model IEnumerable<MyViewModel>
@{
    var grid = new WebGrid(
        canPage: true, 
        rowsPerPage: 10, 
        canSort: true, 
        ajaxUpdateContainerId: "grid"
    );
    grid.Bind(Model, rowCount: Model.Count());
    grid.Pager(WebGridPagerModes.All);
}

@grid.GetHtml(
    htmlAttributes: new { id = "grid" },
    columns: grid.Columns(
        grid.Column("Bar")
    )
)

Notice that I have used a GET request to refresh the grid instead of POST because this way the value query string parameter selected in the dropdown is preserved for future sorting and paging.

Best Answer

Related Solutions

Ajax – Asp Mvc3 webgrid Paging and Filtering by ajax

Paging/Sorting not working on web grid used in Partial View

Related Topic