Mvc Asp排序项目
本文关键字:项目 排序 Asp Mvc | 更新日期: 2023-09-27 18:22:08
我在应用程序中使用了PagedList.MVC进行分页。这很好用。寻呼工作正常,OrderBy下拉列表也工作正常。当我从下拉列表中选择值时,它会给出所需的排序结果。我的意思是,如果我选择A-Z,它会按升序对项目进行精细排序,但当我点击第二页或下一页时,它不会对任何项目进行排序,url会变成这样
http://localhost:41213/Home/Products?page=2&pageSize=6
此外,我如何使pageSize=6成为动态页面?我想把它放在像{5,10,15,20}这样的下拉列表中,当用户选择一个值时,它应该显示所选的项目数量。
控制器
[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);
}
}
查看
@model PagedList.IPagedList<FypStore.Models.Product>
@using PagedList.Mvc
<div class="row">
<div class="col-sm-6">
@using (Html.BeginForm("Products", "Home", FormMethod.Get, new { id = "Form1" }))
{
<div class="col-sm-8">
Sort by:
@Html.DropDownList("OrderBy", new List<SelectListItem>
{
new SelectListItem{ Text="A-Z", Value = "1" },
new SelectListItem{ Text="Z-A", Value = "2" }
}, "-- Order By --")
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Filter" />
</div>
</div>
</div>
}
</div>
</div>
<br />
@Html.PagedListPager(Model, page => Url.Action("Products", new { page, pageSize = Model.PageSize }))
Showing @Model.FirstItemOnPage to @Model.LastItemOnPage of @Model.TotalItemCount Products
您需要修改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
要修复页面链接,需要将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();
部分,然后将其移到其他位置。因为现在您的代码从数据库中获取所有数据,然后对其进行排序并提取必要数量的产品。您应该始终在数据库端执行排序和分页逻辑,并且只获取要在当前页面上显示的产品。