Question

Does anyone have a working sample of json paging for mvc3 webgrid?

I’ve been trawling the interwebs for hours now looking for this and the best i can find is this link: Efficient Paging with WebGrid Web Helper – ASP.NET MVC 3 RC
I’m not convinced by the idea of writing the html in the controller though and I couldn’t get the syntax right for creating edit/delete links.

Cheers!

Answer 1

So it turns out that most of the examples out there greatly overcomplicate matters.
A great example can be found here

It turns out the key is in the property ajaxUpdateContainerId which is grid in my case.

This wires up the grid to work without a full page refresh automagically.

I’ve posted some code from what I’m working on to provide the appropriate syntaxt.

@{

    WebGrid webGrid = new WebGrid(canSort: false, canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "grid");
    webGrid.Bind(Model, autoSortAndPage: false, rowCount: Model.TotalItemCount);

}

<div id="grid">
    @webGrid.GetHtml(alternatingRowStyle: "altrow",
                mode: WebGridPagerModes.All,
                firstText: "<< first",
                previousText: "< previous",
                nextText: "next >",
                lastText: "last >>",
                columns: webGrid.Columns(
                webGrid.Column("Name"),
                webGrid.Column("State.Name", "State"),
                webGrid.Column(header: "",
                               style: "action",
                               format: (item) => new HtmlString(Html.ActionLink("edit", "Edit", new { id = item.CityId }).ToString() + " | " +
                                                                Html.ActionLink("delete", "Delete", new { id = item.CityId }).ToString()
                                                               ))))
</div>