Updating number of displayed elements per page with a drop-down list in ASP.NET MVC

Question

I have numerous data displayed in a table, let's say a long list of Students, so I set up a paging feature to display the elements by pages via the PagedList NuGet package. Its use is detailed here: 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

The number of elements displayed per page is hard-coded : please see in link a few lines below the header, in Add Paging Functionality to the Index Method sub-section :

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

I'd like to put a drop-down list in my view, so that I could directly choose the number of elements to display per page :

I tried to use a DropDownList HTML helper in my view :

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

I populate the drop-down list with a SelectList in my controller, but I can't manage to update the data as I select a value.

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;

I guess I shall access the selected value from the controller and put that accessed value into the pageSize variable. Is it somehow possible to do that ?

Thanks!

Answer 1

OK I've managed to code the feature! I even managed to include a jQuery script that makes the page size update whenever the drop-down list has a new selected value.

Using the following tutorial 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 , I also added a search feature: submitting a string in a search form (a textbox) allows to filter my tab entries.

However, changing the page size by selecting a new value in the drop-down list after having done a search doesn't work: the the search results are reset, all the entries being displayed instead. I guess I forgot to pass some parameter somewhere but I just can't figure out where...

Here is my updated controller:

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

And my Index.cshtml view:

<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

Include @Html.DropDownList inside a Form and add a submit button. When the user selects a value and post it to the controller, save it in Session and use this value in all controllers.