ASP. NET MVC4 HtmlHelper Extension Class for Paging

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.