WebGrid in Partial View - Stop paging from reloading page

Question

I have a dashboard type page which contains multiple partial views each of which contain a webgrid.

For example this is web grids is in my _CurrentSubscriptions partial view:

WebGrid grid = new WebGrid(Model.Titles,
    rowsPerPage: Model.PageSize,
    defaultSort: "Name",
    ajaxUpdateContainerId: "UserSubscriptions");
@grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: @<text>@Html.ActionLink("Remove", "RemoveSub")</text>)));

I also have an _addSubscription partial view which contains the following grid to show search results.

WebGrid grid = new WebGrid(Model.Titles,
    rowsPerPage: Model.PageSize,
    defaultSort: "Name",
    ajaxUpdateContainerId: "TitlesFound");
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: @<text>@Html.ActionLink("Add", "AddSub")</text>)));

Both partial views are called from my Subscriptions/index.cshtml

Is it possible to restrict the paging on each of the grids from reloading the page and just update the selected grid?

score 0 · Answer 1 · answered Dec 29 '14 at 20:53

Wrap your grid in a div with an Id.
(You have already done this) When you instantiate the grid, specify the AJAX parameter ajaxUpdateContainerId with the div's Id.
Reload your page.

Click another page and notice there is no page post back; only the grid reloads.

<div id="UserSubscriptions">
    @grid.GetHtml(columns: 
        grid.Columns(grid.Column("Name"),
        grid.Column("Description"),
        grid.Column(format: @<text>@Html.ActionLink("Add", "AddSub")</text>)));
</div>

WebGrid in Partial View - Stop paging from reloading page

1 Answers1