ASP. NET MVC4 HtmlHelper extension class, implement paging function, mvc4htmlhelper

Source: Internet
Author: User
Tags actionlink

ASP. NET MVC4 HtmlHelper extension class, implement paging function, mvc4htmlhelper

1. Extended 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 = 0? 3: pageSize; var totalPages = Math. max (totalCount + pageSize-1)/pageSize, 1); // the total number of pages var output = new StringBuilder (); if (totalPages> 1) {output. appendFormat ("<a class = 'pagelink 'href =' {0 }? PageIndex = 1 & pageSize = {1} '> homepage </a> ", redirectTo, pageSize); if (currentPage> 1) {// process the output of the previous page connection. appendFormat ("<a class = 'pagelink 'href =' {0 }? PageIndex = {1} & pageSize = {2} '> previous page </a> ", redirectTo, currentPage-1, pageSize);} output. append (""); int currint = 5; for (int I = 0; I <= 10; I ++) {// a total of 10 page numbers can be displayed, first 5, next 5 if (currentPage + I-currint)> = 1 & (currentPage + I-currint) <= totalPages) {if (currint = I) {// process output on the current page. appendFormat ("<a class = 'ccp' href = '{0 }? PageIndex = {1} & pageSize = {2} '>{3} </a> ", redirectTo, currentPage, pageSize, currentPage );} else {// General 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) {// process the next page Link output. appendFormat ("<a class = 'pagelink 'href =' {0 }? PageIndex = {1} & pageSize = {2} '> next 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> page {0}/total page {1} </label>", currentPage, totalPages ); // 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. Add the Action in the Controller.

Public ActionResult Index (int? PageSize, int? PageIndex) {int pageIndex1 = pageIndex ?? 1; int pageSize1 = pageSize ?? 5; int count = 0; // obtain 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 code in the 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 >}@ * page * @ <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 some styles

.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

In this case, quick paging is implemented in MVC. In fact, many open-source projects have related HtmlHepler extension functions, and there are also some paging extensions, for example, the famous open-source store project nopCommerce has an HtmlExtensions. in the cs extension class, there is paging extension, which is quite professional. If you are interested, you can study it.

Articles you may be interested in:
  • Solution to the null problem after asp.net mvc UpdateModel updates the object
  • Solutions to errors caused by ASP. net mvc namespaces
  • ASP. net mvc implements the instrumentation Program
  • Development of ASP. NET Mvc with EF delayed Loading
  • ASP. NET Mvc development-query data
  • ASP. NET Mvc development-delete and modify data
  • Details on the use of HtmlHelper controls in ASP. NET MVC
  • ASP. net mvc Form Verification
  • Asp.net MVC uses custom ModelBinder to filter keywords (with demo source code download)
  • ASP. net mvc uses ActionFilterAttribute to implement permission restrictions (with demo source code download)
  • ASP. net mvc @ Helper method and @ functons User-Defined Function usage method

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.