本文主要做了一個HtmHelper類的分頁擴展函數(shù)，方便在視圖中調(diào)用，有需要的朋友可以參考一下，希望對大家有所幫助。
1、擴展HtmlHelper類方法ShowPageNavigate
public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount)
{
var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;
pageSize = pageSize == 0 ? 3 : pageSize;
var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //總頁數(shù)
var output = new StringBuilder();
if (totalPages > 1)
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首頁</a> ", redirectTo, pageSize);
if (currentPage > 1)
{//處理上一頁的連接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一頁</a> ", redirectTo, currentPage - 1, pageSize);
}
output.Append(" ");
int currint = 5;
for (int i = 0; i <= 10; i++)
{//一共最多顯示10個頁碼，前面5個，后面5個
if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
{
if (currint == i)
{//當前頁處理
output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
}
else
{//一般頁處理
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
}
}
output.Append(" ");
}
if (currentPage < totalPages)
{//處理下一頁的鏈接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一頁</a> ", redirectTo, currentPage + 1, pageSize);
}
output.Append(" ");
if (currentPage != totalPages)
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末頁</a> ", redirectTo, totalPages, pageSize);
}
output.Append(" ");
}
output.AppendFormat("<label>第{0}頁 / 共{1}頁</label>", currentPage, totalPages);//這個統(tǒng)計加不加都行
return new HtmlString(output.ToString());
}
2、添加公共類PagerInfo,PageQuery
public class PagerInfo
{
public int RecordCount { get; set; }
public int CurrentPageIndex { get; set; }
public int PageSize { get; set; }
}
public class PagerQuery<TPager, TEntityList>
{
public PagerQuery(TPager pager, TEntityList entityList)
{
this.Pager = pager;
this.EntityList = entityList;
}
public TPager Pager { get; set; }
public TEntityList EntityList { get; set; }
}
3、然后在Controller里面添加Action
public ActionResult Index(int? pageSize, int? pageIndex)
{
int pageIndex1 = pageIndex ?? 1;
int pageSize1 = pageSize ?? 5;
int count = 0;
//從數(shù)據(jù)庫在取得數(shù)據(jù)，并返回總記錄數(shù)
var temp = newsSer.LoadPageEntities(c => true, c => c.id, false, pageSize1, pageIndex1, out count);
PagerInfo pager = new PagerInfo();
pager.CurrentPageIndex = pageIndex1;
pager.PageSize = pageSize1;
pager.RecordCount = count;
PagerQuery<PagerInfo, IQueryable<news>> query = new PagerQuery<PagerInfo, IQueryable<news>>(pager, temp);
return View(query);
}
4、View里的部分代碼
<tbody>
@foreach (var item in Model.EntityList)
{
<tr>
<td>
<input name="ids[]" type="checkbox" value="" />
</td>
<td>
@item.author
</td>
<td>
@item.title
</td>
<td>
@item.ctime
</td>
<td>
@Html.ActionLink("編輯", "Edit", new { id = item.id }) |
@Html.ActionLink("刪除", "Delete", new { id = item.id })
</td>
</tr>
}
@*分頁*@
<tr>
<td colspan="5">
<span>
@Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount)
</span>
</td>
</tr>
</tbody>
5、添加一些樣式
.paginator
{
font: 12px Arial, Helvetica, sans-serif;
padding: 10px 20px 10px 0;
margin: 0px auto;
}
.paginator a
{
border: solid 1px #ccc;
color: #0063dc;
cursor: pointer;
text-decoration: none;
}
.paginator a:visited
{
padding: 1px 6px;
border: solid 1px #ddd;
background: #fff;
text-decoration: none;
}
.paginator .cpb
{
border: 1px solid #F50;
font-weight: 700;
color: #F50;
background-color: #ffeee5;
}
.paginator a:hover
{
border: solid 1px #F50;
color: #f60;
text-decoration: none;
}
.paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover
{
float: left;
height: 16px;
line-height: 16px;
min-width: 10px;
_width: 10px;
margin-right: 5px;
text-align: center;
white-space: nowrap;
font-size: 12px;
font-family: Arial,SimSun;
padding: 0 3px;
}
.paginator label
{
display:block;
float:left;
}
6.總結(jié)
這個案例簡單實現(xiàn)了在MVC中快速分頁，其實很多開源的項目中都有相關(guān)的HtmlHepler的擴展函數(shù)，其中也不乏帶有分頁的擴展，例如著名的開源商城項目nopCommerce，其中有就一個HtmlExtensions.cs擴展類，里面就有關(guān)于分頁的擴展，人家寫的可是相當專業(yè)哦，有興趣的可以研究一下。