Question

I have a simple question (may not be a simple answer!) with the WebGrid in MVC4.

I have a functional Grid like so

<div id="Submitted">
    @Html.Grid(
        Model.Submitted, displayHeader: false, fieldNamePrefix: "Submitted_", ajaxUpdateContainerId: "Submitted",
        columns: new WebGridColumn[]{
        new WebGridColumn(){ ColumnName = "Date",Header = "Date",Style = "",CanSort = false,Format = x => x.Date.ToString(Globals.Default.DATEFORMAT) },
        new WebGridColumn(){ ColumnName = "ID",Header = "Review",Style = "", CanSort = false, Format = x=>@Html.ActionLink("Review","Review","Company",new{ID = x.ID },new{})  }
    })
</div>

When reloading the “Submitted” div with Ajax when the next page button is clicked, it generates the next page fine – but it’s going to the original action on the controller, which should be a full page.

How does it filter out everything other than the grid itself? with some clever C# code or jQuery?

EDIT:
To clarify, I’m not asking how to do the paging better, or myself, as far as I’m concerned the default paging with the webgrid is working perfectly as it should – I’m asking how the WebGrid does it’s ajax paging when posting back to an action which is returning a FULL page.

Answer 1

It does this using jquery load() and functionality that allows it to select just the relevant incoming nodes. This is taken from http://msdn.microsoft.com/en-us/magazine/hh288075.aspx

To allow the script to be applied just to a WebGrid, it uses jQuery selectors to identify elements with the ajaxGrid class set. The script establishes click handlers for the sorting and paging links (identified via the table header or footer inside the grid container) using the jQuery live method (api.jquery.com/live). This sets up the event handler for existing and future elements that match the selector, which is handy given the script will be replacing the content.