ajax - WebGrid in Partial View - Stop paging from reloading page -

I have a dashboard type page that has several partial views, each of which has a webgrid.

For example, this web grid 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: @ & lt; lesson; @html.ActionLink ("remove "," RemoveSub ") & lt; / text & gt;));

I also have a _addSubscription partial view which includes the following grid for showing search results.

WebGrid Grid = New WebGrid (Model.Titles, rowsPerPage. : Model.PageSize, defaultSort: "name", ajaxUpdateContainerId: "TitlesFound"); Grid.Pager (WebGridPagerModes.All); @ Grid.GetHtml (add columns: grid.Columns (grid.Column ("name"), grid.Column ("description"), grid.Column (format: @ & lt; lesson & gt; @ Html.ActionLink (" "," AddSub ") & lt; / text & gt;));

Both partial ideas are called from my membership / index.cshtml

Is it possible to restrict the page from reloading the page on each grid And update the selected grid only?

1. Wrap your grid in a div.
2. (You have already done this) when you specify the AJAX parameter ajaxUpdateContainerId with the serial number of the grid, div.
3. Reload your page.

4. Click on the second page and note that there is no page post; Only grid reloads.

     & lt; Div id = "user membership" & gt; @ Grid.GetHtml (add columns: grid.Columns (grid.Column ("name"), grid.Column ("description"), grid.Column (format: @ & lt; lesson & gt; @ Html.ActionLink (" "," AddSub ") & lt; / text & gt;)); & Lt; / Div & gt;