如何在 ASP.NET MVC 索引视图的分页中使用下拉页面大小？答案

【问题标题】：How to use dropdown for page size in pagination with ASP.NET MVC index view?如何在 ASP.NET MVC 索引视图的分页中使用下拉页面大小？
【发布时间】：2016-12-01 15:10:40
【问题描述】：

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

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

查看 cmets 后，这是我在 Index.cshtml 视图中 <table> 元素之后所做的：

<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 控制器的索引操作：

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 作为页码时，它默认为页面大小...

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

每次选择页面按钮时，如何从下拉列表中传递所选值？它似乎只适用于选择下拉菜单？

也许有更好的解决方案？

【问题讨论】：

标签： javascript asp.net-mvc html asp.net-mvc-4

【解决方案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 参数添加到每个页码链接，所以我建议使用类似的方式。

首先，将您的控制器方法更改为：

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

然后把你的View代码中<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>

【讨论】：