Question

我已在我的应用程序中使用PagedList.MVC进行分页。这工作正常。分页工作正常，OrderBy下拉列表工作正常。当我从下拉列表中选择值时，它会提供所需的排序结果。我的意思是如果我选择A-Z然后它按升序对项目进行排序，但是当我点击第二页或下一页时，它不会对任何项目进行排序，并且网址将变为这样

http://localhost:41213/Home/Products?page=2&pageSize=6

另外，我怎么能让这个pageSize = 6变得动态？我想把它放在像{5,10,15,20}这样的下拉列表中，当用户选择一个值时，它应该显示所选择的项目数。

控制器

Array ( 
[status] => 200 
[response] => Array ( 
    [api_id] => 38229dd9-8c52-11e5-80f6-22000afd0039 
    [meta] => Array ( 
        [limit] => 20 
        [next] => /v1/Account/xxx/Call/?limit=20&offset=20 
        [offset] => 0 
        [previous] => 
        [total_count] => 57 ) 
    [objects] => Array ( 
        [0] => Array ( 
            [answer_time] => 2015-11-13 18:36:19+01:00 
            [bill_duration] => 10 
            [billed_duration] => 60 
            [call_direction] => inbound 
            [call_duration] => 10 
            [call_uuid] => dcd94e59-8775-4c81-a4b1-cd5d41d630c6 
            [end_time] => 2015-11-13 18:36:29+01:00 
            [from_number] => 3300000000 
            [initiation_time] => 2015-11-13 18:36:18+01:00 
            [parent_call_uuid] => 
            [resource_uri] => /v1/Account/xxx/Call/dcd94e59-8775-4c81-a4b1-cd5d41d630c6/ 
            [to_number] => 3300000000 
            [total_amount] => 0.00500 
            [total_rate] => 0.00500 ) 
        [1] => Array ( 
            [answer_time] => 2015-11-13 15:52:01+01:00 [
            bill_duration] => 48 
            [billed_duration] => 60 
            [call_direction] => inbound 
            [call_duration] => 48 
            [call_uuid] => b2d3de5d-a047-4409-9f7a-825373c38f0a 
            [end_time] => 2015-11-13 15:52:48+01:00 
            [from_number] => 3300000000 
            [initiation_time] => 2015-11-13 15:52:00+01:00 
            [parent_call_uuid] => 
            [resource_uri] => /v1/Account/xxx/Call/b2d3de5d-a047-4409-9f7a-825373c38f0a/ 
            [to_number] => 3300000000 
            [total_amount] => 0.00500 
            [total_rate] => 0.00500 ) 
        ...

查看

    [HttpGet]
    public ActionResult Products(int? OrderBy, int page=1, int pageSize=6)
    {
        private Shopping db = new Shopping();
        switch (OrderBy)
        {
            case 1:
                List<Product> listProductsasc = db.Products.OrderBy(p => p.Name).ToList();
                PagedList<Product> modelasc = new PagedList<Product>(listProductsasc, page, pageSize);
                return View(modelasc);
            case 2:
                List<Product> listProductsdesc = db.Products.OrderByDescending(p => p.Name).ToList();
                PagedList<Product> modeldesc = new PagedList<Product>(listProductsdesc, page, pageSize);
                return View(modeldesc);
            default:
                List<Product> listProducts = db.Products.ToList();
                PagedList<Product> modeldefault = new PagedList<Product>(listProducts, page, pageSize);
                return View(modeldefault);
        }
    }

Answer 1

您需要修改PagedListPager()方法的路由参数以包含排序顺序的值，例如

@Html.PagedListPager(Model, page => Url.Action("Products", new { OrderBy = ViewBag.SortOrder, page, pageSize = Model.PageSize }))

然后在方法中，包括

ViewBag.SortOrder = OrderBy;

返回视图之前。但是，更好的方法是使用包含视图使用的属性的视图模型，这将解决代码的其他问题（例如，如果选择"Z-A"选项并提交表单，则在返回时，集合已排序，但下拉列表显示"-- Order By --"表示未排序。您应该查看模型

public class ProductsVM
{
  [Display(Name = "Sort by:")]
  public int? OrderBy { get; set; }
  public IEnumerable<SelectListItem> OrderList { get; set; }
  public int Page { get; set; }
  public int PageSize { get; set; }
  PagedList<Product> Products { get; set; }
}

并且控制器方法将是

[HttpGet]
public ActionResult Products(int? orderBy, int page=1, int pageSize=6)
{
  private Shopping db = new Shopping();
  IEnumerable<Product> products = db.Products; // not .ToList()
  if (orderBy == 1)
  {
    products = products.OrderBy(p => p.Name);
  }
  else if (orderBy == 2)
  {
    products = products.OrderByDescending(p => p.Name)
  }

  ProductsVM model = new ProductsVM
  {
    OrderBy = orderBy,
    OrderList = new List<SelectListItem>
    {
      new SelectListItem{ Text="A-Z", Value = "1" },
      new SelectListItem{ Text="Z-A", Value = "2" }
    },
    Page = page,
    PageSize = pageSize,
    Products = new PagedList<Product>(products, page, pageSize);
  };
  return View(model);
}

最后修改你的视图以使用视图模型

@model ProductsVM
....
@using (Html.BeginForm("Products", "Home", FormMethod.Get))
{
  @Html.LabelFor(m => m.OrderBy)
  @Html.DropDownListForFor(m => m.OrderBy, Model.OrderList, "-- Order By --")
  <input type="submit" class="btn btn-default" value="Filter" />
}

@Html.PagedListPager(Model.Products, page => Url.Action("Products", new { orderBy = Model.OrderBy, page, pageSize = Model.PageSize }))
Showing @Model.Products.FirstItemOnPage to @Model.Products.LastItemOnPage of @Model.Products.TotalItemCount Products

Answer 2

要修复页面链接，您需要将OrderBy参数传递给视图。最简单的方法是使用ViewBag。在您的控制器中：

[HttpGet]
public ActionResult Products(int? OrderBy, int page = 1, int pageSize = 2)
{
    ViewBag.OrderBy = OrderBy;
    ...

在您看来：

@Html.PagedListPager(Model, page => Url.Action("Products", new { page, pageSize = Model.PageSize, OrderBy = ViewBag.OrderBy }))

另一种方法是使用视图模型。创建一个名为ProductsViewModel的类，并在控制器中填充其属性，如下所示：

List<Product> modelasc = new PagedList<Product>(listProductsasc, page, pageSize);
var viewModel = ProductsViewModel();
viewModel.Products = modelasc;
viewModel.OrderBy = OrderBy;
return View(viewModel);

在视图中使用它们：

@model FypStore.Models.ProductsViewModel
...
@Html.PagedListPager(Model, page => Url.Action("Products", new { page, pageSize = Model.Products.PageSize, OrderBy = Model.OrderBy }))

另外，我怎样才能使这个pageSize = 6成为动态？

您使用与OrderBy参数相同的方式执行此操作：制作名称为pageSize的下拉列表：

<div class="col-sm-8">
    Page size:
    @Html.DropDownList("pageSize", new List<SelectListItem>

            {
            new SelectListItem{ Text="2", Value = "2" },
            new SelectListItem{ Text="3", Value = "3" }
            }, "-- Page Size --")

</div>

旁注：您可能希望在控制器中删除查询的.ToList();部分并将其移至其他位置。因为现在您的代码从数据库中获取所有数据，然后对其进行排序并提取必要数量的产品。您应始终在数据库端执行排序和分页逻辑，并仅获取要在当前页面上显示的那些产品。

Mvc Asp排序项目

2 个答案: