javascript - 如何使用 ASP.NET MVC 索引 View 分页中的页面大小下拉菜单？

Question

我已使用它来对 ASP.NET MVC 4 应用程序中的记录列表进行分页: http://demo.taiga.nl/MvcPaging/Paging/ViewByCategory

我想添加一个下拉菜单来更改页面大小的值。在更改下拉列表中选择的项目时，我希望更改页面大小。 我不想使用默认页面大小。

查看评论后， 这是我在 <table> 之后在 Index.cshtml View 中所做的事情元素:

<div class="pager">
    @Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount)
    Displaying @Model.ItemStart - @Model.ItemEnd of @Model.TotalItemCount items(s)

</div>

@using (Html.BeginForm()) {
  <div id="pro_pag2">
    @Html.DropDownList("PageSize", new SelectList(new Dictionary<string, int> { { "10", 10 }, { "20", 20 }, { "100", 100 } }, "Key", "Value"), new { @class = "pro_pag_tf1", id = "pagesizelist" })
</div>
}

@section scripts {
<script type="text/javascript">
    $('#pagesizelist').on('change', function (event) {
        var form = $(event.target).parents('form');

        form.submit();
    });
</script>
}

Index.cs Controller 的索引操作:

public ActionResult Index(int? PageSize, int? page)
{
    int? DefaultPageSize = 10;
    int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
    if (PageSize != null) {
        DefaultPageSize = PageSize;
    }
    return View(contractsList.ToPagedList(currentPageIndex, (int)DefaultPageSize));
}

更改页码有效。但是，当我使用下拉菜单更改页面大小并选择 2 作为页码时，它会默认为页面大小...

我猜这是因为页面选定按钮未提交从下拉列表中选择的页面大小...如何在索引操作方法中从下拉列表中获取选定的值？

每次选择页面按钮时，如何从下拉列表中传递所选值？似乎只选择下拉菜单就可以工作？

也许有更好的解决方案？

Answer 1

根据上面的代码，生成的第2页链接将如下所示:

<a href="/Index?page=2">2</a>

如果您将页面大小更改为 20，这应该是正确生成的链接

<a href="/Index?PageSize=20&page=2">2</a>

您需要做的是添加 PageSize基于所选页面大小的所有页码链接的参数。来自 http://demo.taiga.nl/MvcPaging/Paging/ViewByCategory 的示例使用ViewBag添加categoryName基于所选类别的每个页码链接的参数，因此我建议使用类似的方式。

首先，将 Controller 方法更改为:

public ActionResult Index(int? PageSize, int? page)
{
    int? DefaultPageSize = 10;
    int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
    if (PageSize != null) {
        DefaultPageSize = PageSize;
    }

    ViewBag.PageSize = DefaultPageSize;

    return View(contractsList.ToPagedList(currentPageIndex, (int)DefaultPageSize));
}

然后更改<div class="pager">的内容在您的查看代码中对此

<div class="pager">
    @Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount).Options(o => o.AddRouteValue("PageSize", ViewBag.PageSize))
    Displaying @Model.ItemStart - @Model.ItemEnd of @Model.TotalItemCount items(s)

</div>