javascript - 网络网格关闭分页

Question

我有一个带有模式窗口(弹出窗口)的页面，我希望在其中有带有分页功能的网络网格。

它工作正常，但是当我尝试对其进行分页(分页也可以自行工作)时，弹出窗口被关闭。当我再次打开弹出窗口时，它会显示我希望他在关闭之前显示的页面。

标记:

WebGrid grid = new WebGrid(db.HarmingFactors, canPage: true, canSort: false, rowsPerPage: 5);

@if (db.HarmingFactors.Any())
{
@grid.GetHtml(
tableStyle: "table",
//some params 
columns: grid.Columns(

    grid.Column("Nr", @Resources.Localization.nr, format: @<text>
                  @{ row = row + 1;} @item.Nr
            </text>, style: "p13"),

    grid.Column("Description", @Resources.Localization.description, format: @<text>
                 @{ row = row + 1;} @item.Description
            </text>),


    grid.Column("", "", format: @<text>
            <input id="select_bttn" style="width:78px" type="submit" value=@Resources.Localization.select />
            </text>)
        )
    )
 }

Answer 1

这是一个非常好的问题。我真的很喜欢解决它!

1.实例化网格时，您需要传递一个名为 ajaxUpdateContainerId 的额外参数:

WebGrid grid = new WebGrid(db.HarmingFactors, canPage: true, canSort: false, rowsPerPage: 5,ajaxUpdateContainerId: "deploymentsGrid");

2.您需要将网格包装在一个 div 中，该 div 的 id 与 ajaxUpdateContainerId 匹配:

<div id="deploymentsGrid">
@if (db.HarmingFactors.Any())
{
@grid.GetHtml(
tableStyle: "table",
//some params 
columns: grid.Columns(

    grid.Column("Nr", @Resources.Localization.nr, format: @<text>
                  @{ row = row + 1;} @item.Nr
            </text>, style: "p13"),

    grid.Column("Description", @Resources.Localization.description, format: @<text>
                 @{ row = row + 1;} @item.Description
            </text>),


    grid.Column("", "", format: @<text>
            <input id="select_bttn" style="width:78px" type="submit" value=@Resources.Localization.select />
            </text>)
        )
    )
 }
</div>

3. Controller 中调用模态弹出窗口显示页面的action方法需要更改如下:

public ActionResult ModalPopup()
{
    if (Request.IsAjaxRequest())
        return PartialView("~/Views/Home/_GetPartial.cshtml", GetItems());
    else
        return View();
}

这是一个完整的工作示例，显然我无权访问您的特定对象，因此我创建了自己的对象以便能够复制问题，但我相信您将能够理解它并应用于您的解决方案:

家庭 Controller :

public class Item2
{
    public string Number { get; set; }
    public string Description { get; set; }
}

public class HomeController : Controller
{
    public ActionResult ModalPopup()
    {
        if (Request.IsAjaxRequest())
            return PartialView("~/Views/Home/_GetPartial.cshtml", GetItems());
        else
            return View();
    }

    public PartialViewResult _GetPartial()
    {
        return PartialView("~/Views/Home/_GetPartial.cshtml",GetItems());
    }

    private List<Item2> GetItems()
    {
        var item1 = new Item2 { Description = "Item 1", Number = "1" };
        var item2 = new Item2 { Description = "Item 2", Number = "2" };
        var item3 = new Item2 { Description = "Item 3", Number = "3" };

        var item4 = new Item2 { Description = "Item 4", Number = "4" };
        var item5 = new Item2 { Description = "Item 5", Number = "5" };
        var item6 = new Item2 { Description = "Item 6", Number = "6" };

        var item7 = new Item2 { Description = "Item 7", Number = "7" };
        var item8 = new Item2 { Description = "Item 8", Number = "8" };
        var item9 = new Item2 { Description = "Item 9", Number = "9" };

        return new List<Item2> { item1, item2, item3, item4, item5, item6, item7, item8, item9 };
    }
}

部分 View :

@model IEnumerable<WebApplication7.Controllers.Item2>


@{

    WebGrid grid = new WebGrid(Model, canPage: true, canSort: false, rowsPerPage: 3, ajaxUpdateContainerId: "deploymentsGrid");

}

<div id="deploymentsGrid">

    @if (Model.Any())
    {
        @grid.GetHtml(
tableStyle: "table",
columns: grid.Columns(

    grid.Column("Nr", "Nr", format: @<text> @item.Number
    </text>, style: "p13"),

    grid.Column("Description","Description", format: @<text> @item.Description</text>),

    grid.Column("", "", format: @<text>
            <input id="select_bttn" style="width:78px" type="submit" value="select" />
    </text>)
                         )
                     )
    }

</div>

主视图:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<script type="text/javascript">
    $(function () {
        $("#showModal").click(function () {
            $('#myModal').modal('show');
        });
    });
</script>
<input type="button" value="Show Modal" id="showModal" />
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Header</h4>
            </div>
            <div class="modal-body">
                @Html.Action("_GetPartial","Home")
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>