使用ASP.NET MVC中的下拉列表更新每页显示的元素数

Question

我在表格中显示了大量数据，让我们说一长串的学生，所以我设置了一个分页功能，通过PagedList NuGet包按页面显示元素。它的用法详见：https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application#add-paging-to-the-students-index-page

每页显示的元素数量是硬编码的：请在标题下方的几行中查看将分页方法添加到索引方法子部分：

// Method for sorting and displaying Students
public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page)
{

   ...

   int pageSize = 3;
   int pageNumber = (page ?? 1);
   return View(students.ToPagedList(pageNumber, pageSize));
}

我想在我的视图中放一个下拉列表，这样我就可以直接选择每页显示的元素数量：

我试图在我的视图中使用DropDownList HTML帮助器：

@Html.DropDownList("NbElementsPerPageChosen", (SelectList)ViewBag.listNbElementsPerPage)

我在控制器中使用SelectList填充下拉列表，但在选择值时无法更新数据。

List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem { Text = "10", Value = "0", Selected = true });
items.Add(new SelectListItem { Text = "25", Value = "1" });
items.Add(new SelectListItem { Text = "50", Value = "2" });
items.Add(new SelectListItem { Text = "100", Value = "3" });
items.Add(new SelectListItem { Text = "All", Value = "4" });
ViewBag.listNbElementsPerPage = items;

我想我将从控制器访问所选值并将访问的值放入pageSize变量中。是不是有可能这样做？

谢谢！

Answer 1

好的，我已设法编写该功能！我甚至设法包含一个jQuery脚本，只要下拉列表中有一个新的选定值，就会更新页面大小。

使用以下教程https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application，我还添加了搜索功能：在搜索表单（文本框）中提交字符串可以过滤我的标签条目。

但是，通过在完成搜索后在下拉列表中选择新值来更改页面大小不起作用：重置搜索结果，所有条目都是显示而不是。我想我忘了在某个地方传递一些参数，但我无法弄清楚在哪里......

这是我更新的控制器：

public ActionResult Index(string sortOrder, string currentFilter, string searchString, int? page, int? PageSize)

    // Sort order is passed to view in order to keep it intact while clicking in another page link
    ViewBag.CurrentSort = sortOrder;

    // Ascending or descending sorting by first or last name according to sortOrder value
    ViewBag.LastNameSortParm = String.IsNullOrEmpty(sortOrder) ? "lastname_desc" : "";
    ViewBag.FirstNameSortParm = sortOrder == "firstname" ? "firstname_desc" : "firstname";

    // Not sure here
    if (searchString == null)
    {
        searchString = currentFilter;
    }

    // Pass filtering string to view in order to maintain filtering when paging
    ViewBag.CurrentFilter = searchString;

    var users = from u in _db.USER select u;

    // FILTERING
    if (!String.IsNullOrEmpty(searchString))
    {
        users = users.Where(u => u.lastname.Contains(searchString)
                              || u.firstname.Contains(searchString)
    }

    // Ascending or descending filtering by first/last name
    switch (sortOrder)
    {
    case "lastname": // Ascending last name
        users = users.OrderBy(u => u.lastname);
        break;
    case "lastname_desc": // Descending last name
        users = users.OrderByDescending(u => u.lastname);
        break;
    case "firstname": // Ascending first name
        users = users.OrderBy(u => u.firstname);
        break;
    case "firstname_desc": // Descending first name
        users = users.OrderByDescending(u => u.firstname);
        break;
    default:
        users = users.OrderBy(u => u.lastname);
        break;
}


// DROPDOWNLIST FOR UPDATING PAGE SIZE
int count = _db.USER.OrderBy(e => e.Id).Count(); // Total number of elements

// Populate DropDownList
ViewBag.PageSize = new List<SelectListItem>() {
    new SelectListItem { Text = "10", Value = "10", Selected = true },
    new SelectListItem { Text = "25", Value = "25" },
    new SelectListItem { Text = "50", Value = "50" },
    new SelectListItem { Text = "100", Value = "100" },
    new SelectListItem { Text = "All", Value = count.ToString() }
};

int pageNumber = (page ?? 1);
int pageSize = (PageSize ?? 10);
ViewBag.psize = pageSize;

return View(users.ToPagedList(pageNumber, pageSize));
}

我的Index.cshtml视图：

<script src="~/Scripts/jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { // Submit pageSizeForm when another pageSize value is selected
    $("#pageSize").change(function () {
        $("#pageSizeForm").submit();
    });
});
</script>

@model PagedList.IPagedList<AfpaSIPAdmin.Models.USER>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    ViewBag.Title = "Users management";
}

<h1>Users management</h1>

<!-- Creating a new entry in table -->
<p>
    @Html.ActionLink("Create new user", "Create")
</p>


<!-- Filtering table entries -->
@using (Html.BeginForm("Index", "Users", FormMethod.Get, new { id = "filterForm" }))
{
    <p>
        Filter: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @placeholder = "First or last name..." })
        <input type="submit" value="Apply"/>
    </p>
}

<!-- Display table -->
<table class="table">
    <tr>
        <th>
            @Html.ActionLink("Last name", "Index", new {
                sortOrder = ViewBag.LastNameSortParm,
                currentFilter = ViewBag.CurrentFilter
            })
        </th>
        <th>
            @Html.ActionLink("First name", "Index", new {
                sortOrder = ViewBag.FirstNameSortParm,
                currentFilter = ViewBag.CurrentFilter
            })
        </th>
        <th style="min-width: 170px"></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
           <td style = "min-width: 150px">
                @Html.DisplayFor(modelItem => item.lastname)
            </td>
            <td style = "min-width: 150px">
                @Html.DisplayFor(modelItem => item.firstname)
            </td>

            <td> <!-- Using images as buttons for actions -->
                <a href="@Url.Action("Edit", "Users", new { id = item.Id })" title="Edit">
                    <img src="~/Content/images/edit.gif" />
                </a>
                <a href="@Url.Action("Details", "Users", new { id = item.Id })" title="Details">
                    <img src="~/Content/images/info.gif" />
                </a>
                <a href="@Url.Action("Delete", "Users", new { id = item.Id })" title="Delete">
                    <img src="~/Content/images/delete.gif" />
                </a>
            </td>
        </tr>
    }
</table>

<br/>

<!-- Paging -->
@using (Html.BeginForm("Index", "Users", FormMethod.Get, new { id = "pageSizeForm" }))
{
    <div class="pager">
        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) sur @Model.PageCount<br/>

        @Model.Count of @Model.TotalItemCount elements 

        @Html.PagedListPager(Model, page => Url.Action("Index", new {
            page,
            sortOrder = ViewBag.CurrentSort,
            currentFilter = ViewBag.CurrentFilter,
            searchString = ViewBag.CurrentFilter, pageSize = ViewBag.psize
        }))

        <!-- DropDownList for setting page size -->
        Elements per page :
        @Html.DropDownList("pageSize")
    </div>
}

Answer 2

除了页码之外，将页面大小作为参数传递给控制器​​可能是最简单的，并且其他所有内容都非常相似。

Answer 3

在表单中包含@ Html.DropDownList并添加提交按钮。当用户选择一个值并将其发布到控制器时，将其保存在Session中并在所有控制器中使用该值。