如何在ASP.NET核心mvc中使用下拉列表更新每页显示的元素数量？

Question

这是我的控制器action.Currently的代码，我正在硬编码正在显示的项数，它是2。我想从下拉列表中选择项数，这样当用户选择一个数字时，比如10，那么view将每页显示10个项。请有人帮助我，因为我是新的，没有得到任何与此相关的解决方案，这是我的学期项目中需要的。我会非常感激的。

 public IActionResult Index(string sortOrder,int pageNumber=1,int pageSize=2)
    {
        ViewBag.CurrentSortOrder = sortOrder;
        ViewBag.NameSortParam =String.IsNullOrEmpty(sortOrder)? "name_desc":"";
        int ExcludeRecords = (pageSize * pageNumber) - pageSize;
        var Students = from b in _context.Students.Where(x => x.IsDeleted == false).ToList()
                       select b;

        switch (sortOrder)
            {
               case "name_desc":
                 Students= Students.OrderByDescending(a => a.Name).ToList();
                   break;
               default:
                   Students = Students.OrderBy(a => a.Name).ToList();
                   break;
           }


        Students = Students.Skip(ExcludeRecords)
            .Take(pageSize);
        var result = new PagedResult<Student>
        {
            Data = Students.ToList(),
            TotalItems = _context.Students.Where(x => x.IsDeleted == false).Count(),
            PageNumber=pageNumber,
            PageSize = pageSize
        };
       
        return View(result);
    }

这是分页代码，我使用的是cloudscribe分页：

<cs-pager cs-paging-pagenumber="(int)Model.PageNumber"
      cs-paging-totalitems="(int)Model.TotalItems"
      cs-paging-pagesize="Model.PageSize"
      cs-pagenumber-param="pagenumber"
      asp-route-sortOrder="@ViewBag.CurrentSortOrder"
      asp-controller=@ViewData["Controller"]
      asp-action=@ViewData["Action"]
      cs-pager-li-current-class="page-item active"
      cs-pager-li-other-class="page-item"
      cs-pager-li-non-active-class="page-item disabled"
      cs-pager-link-current-class="page-link"
      cs-pager-link-other-class="page-link">

Answer 1

您需要添加pageSize参数以传递给cs-pager中的操作，保存每次通过dropdown选择的pageSize值，并将其绑定回数据。

首先使用ViewBag.pageSize = pageSize;保存视图中的pageSize。

然后在视图中使用此代码在以下位置之前获取选定的pageSize：

   @{ 
        var selectedIndex = (int)ViewBag.pageSize;
    }

最后，在cs-pager中添加asp-route-pageSize="@selectedIndex"。

下面是供您参考的compelete代码：

查看：

@{ 
    var selectedIndex = (int)ViewBag.pageSize; //add this line
}

@model xxx

<h1>Index</h1>

<form action="/Controller/Action" method="POST">
    <select name="pageSize" asp-for="@selectedIndex"  onchange="javascript:this.form.submit()">
        <option>please choose a number</option>
        <option value=1>1</option>
        <option value=2>2</option>
        <option value=3>3</option>
        <option value=4>4</option>
        <option value=5>5</option>
        <option value=6>6</option>
        <option value=7>7</option>
        <option value=8>8</option>
        <option value=9>9</option>
    </select> 
</form>



<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Studentname</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var a in Model.Students.Data)
        {
            <tr>
                <td>@a.Name</td>
            </tr>
        }
    </tbody>
</table>

<cs-pager cs-paging-pagenumber="(int)Model.PageNumber"
      cs-paging-totalitems="(int)Model.TotalItems"
      cs-paging-pagesize="Model.PageSize"
          cs-pagenumber-param="pagenumber"
          asp-route-sortOrder="@ViewBag.CurrentSortOrder"
          asp-controller="@ViewData["Controller"]"
          asp-action="ViewData["Action"]"  asp-route-pageSize="@selectedIndex"
          cs-pager-li-current-class="page-item active"
          cs-pager-li-other-class="page-item"
          cs-pager-li-non-active-class="page-item disabled"
          cs-pager-link-current-class="page-link"
          cs-pager-link-other-class="page-link"></cs-pager>  

操作：

 public IActionResult Index(string sortOrder,int pageNumber=1,int pageSize=1)
    { 
        ViewBag.pageSize = pageSize;// add this line,it is the key point
        ViewBag.CurrentSortOrder = sortOrder;
        ViewBag.NameSortParam =String.IsNullOrEmpty(sortOrder)? "name_desc":"";
        int ExcludeRecords = (pageSize * pageNumber) - pageSize;
        var Students = from b in _context.Students.Where(x => x.IsDeleted == false).ToList()
                       select b;

        switch (sortOrder)
            {
               case "name_desc":
                 Students= Students.OrderByDescending(a => a.Name).ToList();
                   break;
               default:
                   Students = Students.OrderBy(a => a.Name).ToList();
                   break;
           }


        Students = Students.Skip(ExcludeRecords)
            .Take(pageSize);
        var result = new PagedResult<Student>
        {
            Data = Students.ToList(),
            TotalItems = _context.Students.Where(x => x.IsDeleted == false).Count(),
            PageNumber=pageNumber,
            PageSize = pageSize
        };
       
        return View(result);
    }

测试结果如下：

​

​