ASP. NET MVC4 HtmlHelper Extension Class for Paging
- 2021-07-10 19:32:25
- OfStack
1. Extend the HtmlHelper class method 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); // Total pages
var output = new StringBuilder();
if (totalPages > 1)
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'> Home page </a> ", redirectTo, pageSize);
if (currentPage > 1)
{// On processing 1 Connection of pages
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'> Upper 1 Page </a> ", redirectTo, currentPage - 1, pageSize);
}
output.Append(" ");
int currint = 5;
for (int i = 0; i <= 10; i++)
{//1 Total maximum display 10 Page number, front 5 A, back 5 A
if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
{
if (currint == i)
{// Current page processing
output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
}
else
{//1 Page processing
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)
{// Under processing 1 Links to pages
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'> Under 1 Page </a> ", redirectTo, currentPage + 1, pageSize);
}
output.Append(" ");
if (currentPage != totalPages)
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'> Last page </a> ", redirectTo, totalPages, pageSize);
}
output.Append(" ");
}
output.AppendFormat("<label> No. 1 {0} Page / Altogether {1} Page </label>", currentPage, totalPages);// This statistic can be added or not
return new HtmlString(output.ToString());
}
2. Add public classes PagerInfo and 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. Then add Action to Controller
public ActionResult Index(int? pageSize, int? pageIndex)
{
int pageIndex1 = pageIndex ?? 1;
int pageSize1 = pageSize ?? 5;
int count = 0;
// Get data from the database and return the total number of records
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. Some codes in View
<tbody>
@foreach (var item in Model.EntityList)
{
<tr>
<td class="checkBox">
<input name="ids[]" type="checkbox" value="" />
</td>
<td>
@item.author
</td>
<td>
@item.title
</td>
<td>
@item.ctime
</td>
<td>
@Html.ActionLink(" Edit ", "Edit", new { id = item.id }) |
@Html.ActionLink(" Delete ", "Delete", new { id = item.id })
</td>
</tr>
}
@* Paging *@
<tr class="">
<td colspan="5" align="center" class="paginator">
<span>
@Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount)
</span>
</td>
</tr>
</tbody>
5. Add 1 Style
.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. Summary
This case simple realization in MVC fast paging, in fact, many open source projects have related HtmlHepler extension function, which also has paging extension, such as the famous open source mall project nopCommerce, which has an HtmlExtensions. cs extension class, which has on the expansion of paging, people write but quite professional oh, interested can study 1.