Question

我正在使用带有分页的WebGrid以及AJAX弹出窗口来添加新条目。我注意到在添加条目后，WebGrid底部的分页链接变为非活动状态。

弹出窗口调用控制器的保存操作，完成以下操作：

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

此处使用了三种视图。索引，网格和弹出窗口。网格嵌入在索引中，可以通过单击网格上的按钮和索引来调用弹出窗口。

索引视图包含以下代码：

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

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

    //other code
}

网格视图（_PersonGrid.cshtml）是：

@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)
    )
)

最后弹出视图是：

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

}

当我第一次到达页面或如果我刷新它们时它们会再次激活。

Answer 1

我猜你的“ajaxUpdateContainerId：”myUserGrid“”是一个带有id =“myUserGrid”的div，并且部分被加载到那里..如果我错了，请纠正我，但我相信div应该在你偏爱有时候有点混乱，但你应该尝试一下..

查看：

@*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>

如果这不起作用，请提供一些额外的数据（您调用部分的视图，调用保存操作的位置和方式等）。

Answer 2

在研究了WebGrid分页实际上是如何工作之后，似乎在执行保存之后它会尝试在Save方法上调用GET方法。所以我为此目的创建了一个方法，然后将其重定向回Index方法。最后两个参数直接传递给查询字符串，然后在分页中使用。

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

添加条目后，WebGrid上的分页将停用

2 个答案: