[英]How do I do pagination in ASP.NET MVC?
在 ASP.NET MVC 中進行分頁的最首選和最簡單的方法是什么? 即什么是將列表分解為幾個可瀏覽頁面的最簡單方法。
例如,假設我從數據庫/網關/存儲庫中獲取元素列表,如下所示:
public ActionResult ListMyItems()
{
List<Item> list = ItemDB.GetListOfItems();
ViewData["ItemList"] = list;
return View();
}
為簡單起見,我只想為我的操作指定一個頁碼作為參數。 像這樣:
public ActionResult ListMyItems(int page)
{
//...
}
那么,什么是數據源? 你的行動可以采取一些默認的論點,即
ActionResult Search(string query, int startIndex, int pageSize) {...}
默認路由設置,以便startIndex為0,pageSize為(比方說)20:
routes.MapRoute("Search", "Search/{query}/{startIndex}",
new
{
controller = "Home", action = "Search",
startIndex = 0, pageSize = 20
});
要拆分Feed,您可以非常輕松地使用LINQ:
var page = source.Skip(startIndex).Take(pageSize);
(如果使用“pageNumber”而不是“startIndex”,則進行乘法運算)
使用LINQ-toSQL,EF等 - 這也應該“組合”到數據庫。
然后,您應該能夠使用操作鏈接到下一頁(等):
<%=Html.ActionLink("next page", "Search", new {
query, startIndex = startIndex + pageSize, pageSize }) %>
我遇到了同樣的問題,並為一個Pager Class找到了一個非常優雅的解決方案
http://blogs.taiga.nl/martijn/2008/08/27/paging-with-aspnet-mvc/
在您的控制器中,通話看起來像:
return View(partnerList.ToPagedList(currentPageIndex, pageSize));
在你看來:
<div class="pager">
Seite: <%= Html.Pager(ViewData.Model.PageSize,
ViewData.Model.PageNumber,
ViewData.Model.TotalItemCount)%>
</div>
我想通過前端介紹一種簡單的方法:
控制器:
public ActionResult Index(int page = 0)
{
const int PageSize = 3; // you can always do something more elegant to set this
var count = this.dataSource.Count();
var data = this.dataSource.Skip(page * PageSize).Take(PageSize).ToList();
this.ViewBag.MaxPage = (count / PageSize) - (count % PageSize == 0 ? 1 : 0);
this.ViewBag.Page = page;
return this.View(data);
}
視圖:
@* rest of file with view *@
@if (ViewBag.Page > 0)
{
<a href="@Url.Action("Index", new { page = ViewBag.Page - 1 })"
class="btn btn-default">
« Prev
</a>
}
@if (ViewBag.Page < ViewBag.MaxPage)
{
<a href="@Url.Action("Index", new { page = ViewBag.Page + 1 })"
class="btn btn-default">
Next »
</a>
}
調節器
[HttpGet]
public async Task<ActionResult> Index(int page =1)
{
if (page < 0 || page ==0 )
{
page = 1;
}
int pageSize = 5;
int totalPage = 0;
int totalRecord = 0;
BusinessLayer bll = new BusinessLayer();
MatchModel matchmodel = new MatchModel();
matchmodel.GetMatchList = bll.GetMatchCore(page, pageSize, out totalRecord, out totalPage);
ViewBag.dbCount = totalPage;
return View(matchmodel);
}
商業邏輯
public List<Match> GetMatchCore(int page, int pageSize, out int totalRecord, out int totalPage)
{
SignalRDataContext db = new SignalRDataContext();
var query = new List<Match>();
totalRecord = db.Matches.Count();
totalPage = (totalRecord / pageSize) + ((totalRecord % pageSize) > 0 ? 1 : 0);
query = db.Matches.OrderBy(a => a.QuestionID).Skip(((page - 1) * pageSize)).Take(pageSize).ToList();
return query;
}
用於顯示總頁數的視圖
if (ViewBag.dbCount != null)
{
for (int i = 1; i <= ViewBag.dbCount; i++)
{
<ul class="pagination">
<li>@Html.ActionLink(@i.ToString(), "Index", "Grid", new { page = @i },null)</li>
</ul>
}
}
我認為在ASP.NET MVC應用程序中創建分頁的最簡單方法是使用PagedList庫。
以下github存儲庫中有一個完整的示例。 希望它會有所幫助。
public class ProductController : Controller
{
public object Index(int? page)
{
var list = ItemDB.GetListOfItems();
var pageNumber = page ?? 1;
var onePageOfItem = list.ToPagedList(pageNumber, 25); // will only contain 25 items max because of the pageSize
ViewBag.onePageOfItem = onePageOfProducts;
return View();
}
}
演示鏈接: http : //ajaxpagination.azurewebsites.net/
源代碼: https : //github.com/ungleng/SimpleAjaxPagedListAndSearchMVC5
實體
public class PageEntity
{
public int Page { get; set; }
public string Class { get; set; }
}
public class Pagination
{
public List<PageEntity> Pages { get; set; }
public int Next { get; set; }
public int Previous { get; set; }
public string NextClass { get; set; }
public string PreviousClass { get; set; }
public bool Display { get; set; }
public string Query { get; set; }
}
HTML
<nav>
<div class="navigation" style="text-align: center">
<ul class="pagination">
<li class="page-item @Model.NextClass"><a class="page-link" href="?page=@(@Model.Previous+@Model.Query)">«</a></li>
@foreach (var item in @Model.Pages)
{
<li class="page-item @item.Class"><a class="page-link" href="?page=@(item.Page+@Model.Query)">@item.Page</a></li>
}
<li class="page-item @Model.NextClass"><a class="page-link" href="?page=@(@Model.Next+@Model.Query)">»</a></li>
</ul>
</div>
</nav>
尋呼邏輯
public Pagination GetCategoryPaging(int currentPage, int recordCount, string query)
{
string pageClass = string.Empty; int pageSize = 10, innerCount = 5;
Pagination pagination = new Pagination();
pagination.Pages = new List<PageEntity>();
pagination.Next = currentPage + 1;
pagination.Previous = ((currentPage - 1) > 0) ? (currentPage - 1) : 1;
pagination.Query = query;
int totalPages = ((int)recordCount % pageSize) == 0 ? (int)recordCount / pageSize : (int)recordCount / pageSize + 1;
int loopStart = 1, loopCount = 1;
if ((currentPage - 2) > 0)
{
loopStart = (currentPage - 2);
}
for (int i = loopStart; i <= totalPages; i++)
{
pagination.Pages.Add(new PageEntity { Page = i, Class = string.Empty });
if (loopCount == innerCount)
{ break; }
loopCount++;
}
if (totalPages <= innerCount)
{
pagination.PreviousClass = "disabled";
}
foreach (var item in pagination.Pages.Where(x => x.Page == currentPage))
{
item.Class = "active";
}
if (pagination.Pages.Count() <= 1)
{
pagination.Display = false;
}
return pagination;
}
使用Controller
public ActionResult GetPages()
{
int currentPage = 1; string search = string.Empty;
if (!string.IsNullOrEmpty(Request.QueryString["page"]))
{
currentPage = Convert.ToInt32(Request.QueryString["page"]);
}
if (!string.IsNullOrEmpty(Request.QueryString["q"]))
{
search = "&q=" + Request.QueryString["q"];
}
/* to be Fetched from database using count */
int recordCount = 100;
Place place = new Place();
Pagination pagination = place.GetCategoryPaging(currentPage, recordCount, search);
return PartialView("Controls/_Pagination", pagination);
}
它使用PagedList.MVC NuGet包。 我將嘗試總結這些步驟
安裝PagedList.MVC NuGet包
建立項目
using PagedList;
添加 using PagedList;
到控制器
修改你的動作以設置頁面 public ActionResult ListMyItems(int? page) { List list = ItemDB.GetListOfItems(); int pageSize = 3; int pageNumber = (page ?? 1); return View(list.ToPagedList(pageNumber, pageSize)); }
public ActionResult ListMyItems(int? page) { List list = ItemDB.GetListOfItems(); int pageSize = 3; int pageNumber = (page ?? 1); return View(list.ToPagedList(pageNumber, pageSize)); }
將分頁鏈接添加到視圖的底部 @*Your existing view*@ Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount @Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
public ActionResult Paging(int? pageno,bool? fwd,bool? bwd)
{
if(pageno!=null)
{
Session["currentpage"] = pageno;
}
using (HatronEntities DB = new HatronEntities())
{
if(fwd!=null && (bool)fwd)
{
pageno = Convert.ToInt32(Session["currentpage"]) + 1;
Session["currentpage"] = pageno;
}
if (bwd != null && (bool)bwd)
{
pageno = Convert.ToInt32(Session["currentpage"]) - 1;
Session["currentpage"] = pageno;
}
if (pageno==null)
{
pageno = 1;
}
if(pageno<0)
{
pageno = 1;
}
int total = DB.EmployeePromotion(0, 0, 0).Count();
int totalPage = (int)Math.Ceiling((double)total / 20);
ViewBag.pages = totalPage;
if (pageno > totalPage)
{
pageno = totalPage;
}
return View (DB.EmployeePromotion(0,0,0).Skip(GetSkip((int)pageno,20)).Take(20).ToList());
}
}
private static int GetSkip(int pageIndex, int take)
{
return (pageIndex - 1) * take;
}
@model IEnumerable<EmployeePromotion_Result>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Paging</title>
</head>
<body>
<div>
<table border="1">
@foreach (var itm in Model)
{
<tr>
<td>@itm.District</td>
<td>@itm.employee</td>
<td>@itm.PromotionTo</td>
</tr>
}
</table>
<a href="@Url.Action("Paging", "Home",new { pageno=1 })">First page</a>
<a href="@Url.Action("Paging", "Home", new { bwd =true })"><<</a>
@for(int itmp =1; itmp< Convert.ToInt32(ViewBag.pages)+1;itmp++)
{
<a href="@Url.Action("Paging", "Home",new { pageno=itmp })">@itmp.ToString()</a>
}
<a href="@Url.Action("Paging", "Home", new { fwd = true })">>></a>
<a href="@Url.Action("Paging", "Home", new { pageno = Convert.ToInt32(ViewBag.pages) })">Last page</a>
</div>
</body>
</html>
可以創建可重復使用的分頁。 我們需要的是:
IQueryable
分頁邏輯的可重用方法所以我們的代碼是這樣的:
人表。 我使用過 SQL Server:
IF NOT EXISTS
(
SELECT 1
FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_NAME = 'Person'
AND TABLE_SCHEMA = 'dbo'
)
BEGIN
CREATE TABLE dbo.Person
(
ID INT IDENTITY(1, 1) NOT NULL PRIMARY KEY
, CreateDate DATETIME NOT NULL DEFAULT GETDATE()
, Creator VARCHAR(100) NOT NULL
, ModifyDate DATETIME NULL
, Modifier VARCHAR(20) NULL
, FirstName VARCHAR(150) NOT NULL
, LastName VARCHAR(1000) NOT NULL
)
ON [PRIMARY]
END
GO
我使用過 DatabaseFirst 方法。 這是實體框架生成的類。
public partial class Person
{
public int ID { get; set; }
public System.DateTime CreateDate { get; set; }
public string Creator { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public Nullable<System.DateTime> ModifyDate { get; set; }
public string Modifier { get; set; }
}
這是一個包含數據和分頁信息的類:
public class DataResultViewModel<T>
{
/// <summary>
/// Data items
/// </summary>
public IEnumerable<T> Items { get; set; }
/// <summary>
/// Pagination
/// </summary>
public Pagination Pagination { get; set; }
}
這是包含有關人員信息的類。
public class PersonViewModel
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
/// <summary>
/// What route should be requested while paging
/// </summary>
public class RouteInfo
{
/// <summary>
/// Name of controller
/// </summary>
public string ControllerName { get; set; }
/// <summary>
/// Name of action
/// </summary>
public string ActionName { get; set; }
}
和分頁類:
public class Pagination
{
/// <summary>
/// Total count of items
/// </summary>
public int TotalItems { get; set; }
/// <summary>
/// Count of items at the page
/// </summary>
public int PageSize { get; set; } = 5;
/// <summary>
/// Current page
/// </summary>
public int Page { get; set; }
/// <summary>
/// Sorted by field name
/// </summary>
public string SortBy { get; set; }
/// <summary>
/// Is this an ascending sort?
/// </summary>
public bool IsSortAscending { get; set; }
/// <summary>
/// Information about what page should be requested
/// </summary>
public RouteInfo RouteInfo { get; set; }
}
以及進行分頁的類。 基本上, Skip()
和 Take ()
是進行分頁的方法,因此我們需要對所有IQueryable
使用這些方法。 C# 有一個非常簡潔的特性,叫做擴展方法。 擴展方法允許重用代碼:
public static class IQueryableExtension
{
public static IQueryable<T> UseOrdering<T, TResultSelector>(this IQueryable<T> query,
Pagination pagination,
Expression<Func<T, TResultSelector>> field)
{
if (string.IsNullOrWhiteSpace(pagination.SortBy)
|| string.IsNullOrEmpty(pagination.SortBy))
return query;
return pagination.IsSortAscending ?
query.OrderBy(field) :
query.OrderByDescending(field);
}
public static IQueryable<T> UsePagination<T>(this IQueryable<T> query,
Pagination pagination)
{
if (pagination.Page <= 0)
pagination.Page = 1;
if (pagination.PageSize <= 0)
pagination.PageSize = 10;
return query.Skip((pagination.Page - 1) * pagination.PageSize)
.Take(pagination.PageSize);
}
}
這是一類服務層:
public class PersonService
{
public DataResultViewModel<PersonViewModel> GetWithPagination(Pagination pagination,
Expression<Func<Person, DateTime>> fieldName)
{
var result = new DataResultViewModel<PersonViewModel>();
using (var db = new MiscellaneousEntities())
{
var persons = db.Person.AsQueryable();
result.Pagination = pagination;
result.Pagination.TotalItems = persons.Count();
result.Pagination.RouteInfo = new RouteInfo()
{
ActionName = "Index",
ControllerName = "Person"
};
if (pagination.SortBy == null)
pagination.SortBy = "CreateDate";
persons = persons.UseOrdering(pagination, fieldName);
persons = persons.UsePagination(pagination);
result.Items = persons
.Select(s => new PersonViewModel()
{
ID = s.ID,
FirstName = s.FirstName,
LastName = s.LastName
})
.ToList();
return result;
}
}
}
和控制人:
public class PersonController : Controller
{
PersonService _personService;
public PersonController()
{
_personService = new PersonService();
}
// GET: Person
public ActionResult Index(int? page, int? pageSize, string sortBy,
bool? isSortAscending)
{
return View
(_personService.GetWithPagination(new Pagination()
{
Page = page ?? 1,
PageSize = pageSize ?? 3,
SortBy = sortBy,
IsSortAscending = isSortAscending ?? false
},
v => v.CreateDate
)
);
}
}
然后我們應該創建視圖。
這是一個應該分頁的人視圖:
@model OnlyPagination.ViewModel.DataResultViewModel<OnlyPagination.ViewModel.PersonViewModel>
<div class="d-flex justify-content-center">
<div>
@foreach (var item in Model.Items)
{
<div>
<p>Id is @item.ID</p>
<p>FirstName is @item.FirstName</p>
<p>LastName is @item.LastName</p>
</div>
<hr />
}
</div>
</div>
<div class="d-flex justify-content-center">
@{
@Html.Partial("Pagination", Model.Pagination)
}
</div>
它是一個可重用的分頁部分視圖:
@model OnlyPagination.Extensions.Query.Model.Pagination
@{
var pagesCount = Math.Ceiling((decimal)Model.TotalItems / (decimal)Model.PageSize);
var pages = new List<int>();
for (var i = 1; i <= pagesCount; i++)
{
pages.Add(i);
}
}
<div>
<p class="d-flex justify-content-center">Page @Model.Page of @pagesCount</p>
<ul class="pagination">
<li class="page-item @( Model.Page == 1 ? "disabled" : "" )">
<a aria-label="Previous" class="page-link"
href="@Url.Action
(Model.RouteInfo.ActionName, Model.RouteInfo.ControllerName,
new { page = Model.Page - 1, pageSize = Model.PageSize })">
<span aria-hidden="true">«</span>
</a>
</li>
@for (int pageNumber = 1; pageNumber <= pages.Count; pageNumber++)
{
<li class="page-item @( Model.Page == pageNumber ? "active" : "" )">
<a class="page-link"
href="@Url.Action(Model.RouteInfo.ActionName,
Model.RouteInfo.ControllerName,
new { page = pageNumber, pageSize = Model.PageSize })">
@pageNumber </a>
</li>
}
<li class="page-item @(Model.Page == pages.Count ? "disabled" : "")">
<a aria-label="Next" class="page-link"
href="@Url.Action
(Model.RouteInfo.ActionName, Model.RouteInfo.ControllerName,
new { page = Model.Page + 1, pageSize = Model.PageSize })">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
就這樣!
在 ASP .NET 應用程序中插入頁面分頁,首先需要從項目的 NuGet 包中安裝 Paged List 和 PagedList.MVC。
然后我包含了從數據庫返回書籍列表的示例方法。 我包括頁面分頁以在每個頁面中顯示 4 個項目。
public ActionResult Books(int? i)
{
IEnumerable<Books> BooksList;
HttpResponseMessage response = GlobalVariables.webApiClient.GetAsync("Tbl_Books").Result;
BooksList = response.Content.ReadAsAsync<IEnumerable<Books>>().Result;
return View(BooksList.ToList().ToPagedList(i ?? 1, 4));
}
在查看頁面中,這應該包括在內。
@Html.PagedListPager(Model, i => Url.Action("Books", "Library", new { i }))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.