Question

我有一个带模态窗口（弹出窗口）的页面，我想在其中使用webgrid进行分页。

它运行正常，但是当我尝试分页时（它也可以自我分页），弹出窗口关闭。当我再次打开弹出窗口时，它会显示我希望他在关闭之前显示的页面。

标记：

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.您需要将网格包含在id为ajaxUpdateContainerId的div中：

<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.控制器中调用显示模态弹出窗口的页面的操作方法需要更改如下：

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

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

家庭控制器：

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 };
    }
}

部分视图

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

Web网格关闭分页

1 个答案: