如何在ASP.NET MVC索引视图的分页中使用页面大小的下拉列表?

时间:2014-03-19 03:35:49

标签: javascript html asp.net-mvc html5 asp.net-mvc-4

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

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

查看评论后, 这就是我在<table>元素之后的Index.cshtml视图中所做的:

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

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

每次选择页面按钮时,如何从下拉列表中传递选定的值?它似乎只是选择下拉列表?

也许有更好的解决方案?

1 个答案:

答案 0 :(得分:2)

根据您的上述代码,第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>