Pagination on WebGrid deactivates after adding entries

Question

I'm using a WebGrid with pagination in conjunction with an AJAX popup window to add new entries. I've noticed that after I've added an entry the pagination links at the bottom of the WebGrid become inactive.

The popup calls the controller's Save action which finishes with the following:

return PartialView("_PersonGrid", pModel.Persons);

There are three views that are used here. An index, a grid and a popup. The grid is embedded in the index and the popup can be called by clicking on buttons on the grid and index.

The index view has the following code:

@using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myUserGrid" }))
{

<div id="myUserGrid">
    @Html.Partial("_PersonGrid", Model.Persons)
</div>
<br />

    //other code
}

The grid view (_PersonGrid.cshtml) is:

@model IEnumerable<CIMsWebApp.Client.Group.Entities.IPerson>

@{  var grid = new WebGrid(Model, canSort: true, canPage: true, defaultSort: "UserName", ajaxUpdateContainerId: "myUserGrid"); }    


@grid.GetHtml(
    tableStyle: "dataGrid", 
    headerStyle: "header",
    alternatingRowStyle: "evenRow",
    columns: grid.Columns
    (
        grid.Column(header: "User Name", columnName: "UserName", format: item => Html.Raw("<a href='#' class='userNames' data-personid='"+item.PersonId+"'>" + item.UserName + "</a>"), canSort: false),
        grid.Column(header: "Role(s)", columnName: "Rolebuilder", canSort: false),
        grid.Column(header: "Active", columnName: "ActiveIndBuilder", canSort: false),
        grid.Column(header: "Action", format:
                                    @<span><input type="button" class="edit-user" id="@item.PersonId" value="EDIT" />
                                    </span>, canSort: false)
    )
)

finally the popup view is:

@model CIMsWebApp.Models.PersonModel
@using (Html.BeginForm("Save", "Person", FormMethod.Post, new { id = "formUser" }))
{
    //code

}

When I first arrive at the page or If I refresh it they become active again.

score 3 · Answer 1 · answered Oct 30 '12 at 14:48

I'm guessing your "ajaxUpdateContainerId: "myUserGrid"" is a div with an id="myUserGrid" and the partial is loaded in there.. So correct me if I'm wrong but I believe that div should be in your partial. It's a bit confusing sometimes but you should try this out..

View:

@*Everything else except the div*@
@{Html.RenderPartial("_PersonGrid", Model)

PartialView:

@model IEnumerable<CIMsWebApp.Client.Group.Entities.IPerson>
<div id="myUserGrid">
    @{  var grid = new WebGrid(Model, canSort: true, canPage: true, defaultSort: "UserName", ajaxUpdateContainerId: "myUserGrid"); }    


    @grid.GetHtml(
        tableStyle: "dataGrid", 
        headerStyle: "header",
        alternatingRowStyle: "evenRow",
        columns: grid.Columns
        (
            grid.Column(header: "User Name", columnName: "UserName", format: item => Html.Raw("<a href='#' class='userNames' data-personid='"+item.PersonId+"'>" + item.UserName + "</a>"), canSort: false),
            grid.Column(header: "Role(s)", columnName: "Rolebuilder", canSort: false),
            grid.Column(header: "Active", columnName: "ActiveIndBuilder", canSort: false),
            grid.Column(header: "Action", format:
                                @<span><input type="button" class="edit-user" id="@item.PersonId" value="EDIT" />
                                </span>, canSort: false)
        )
    )
</div>

If this doesn't work, give some additional data (the view in which you call the partial, where and how you call the save action, etc...)

Thanks for replying but I didn't really understand your solution. I've posted more code above and hopefully made it a little but clearer then it was. — Sperick, Oct 30 '12 at 16:27
I tried moving the
as you suggested but it didn't solve the problem. The pagination still doesn't work after a a change has been made. — Sperick, Dec 05 '12 at 10:54

score 0 · Accepted Answer · answered Dec 05 '12 at 12:32

After looking into how the WebGrid pagination actually works it seems that after carrying out a save it then tries to call a GET method on the Save method. So I created a method for this very purpose and then redirected it back to the Index method. The final two parameters get passed directly to the query string which are then used in the pagination.

[ActionName("Save")]
public ActionResult Pagination(string page, string __, long id = 0)
{
  return RedirectToAction("Index", new {id = id, page=page, __ = __ }); 
}

Pagination on WebGrid deactivates after adding entries

2 Answers2