Asp. netmvc

Asp. netmvc
Display logic of the paging control:

 

1. The current page is highlighted in Reversed colors and the link cannot be clicked.

2. When the first page is displayed, the home page cannot be clicked.

3. The link at the end of the last page cannot be clicked.

4 You can adjust the page numbers displayed on the left and right of the current page. If the left and right are the same, the page numbers are centered.

5. When the page number on the left is insufficient, add one on the right.

6 when the right side of the page is insufficient, add on the left side

7. The total number of displayed pages is left + right + 1 (current)

 

Components:

 

1 PageModel: easy to pass parameters to components

Public class PageModel {// <summary> // total number of data entries /// </summary> public int DataCount {get; set ;} /// <summary> /// current Page number /// </summary> public int Page {get; set ;} /// <summary> /// number of entries per page /// </summary> public int PageSize {get; set ;} /// <summary> // display the number of pages on the left of the current page /// </summary> public int NumsOfLeft {get; set ;} /// <summary> /// display the number of pages on the right of the current page /// </summary> public int NumsOfRight {get; set ;} /// <summary> /// maximum number of entries per page. // MaxPage prevails if the PageSize is greater than MaxPage. /// </summary> public int MaxPage {get; set ;}//< summary> /// the URL before the page /// for example, the URL is http://www.chengchenxu.com/1 /// 1 indicates the page number. This attribute should be set :/// http://www.chengchenxu/ /// </Summary> public string Url {get; set;} public PageModel () {// sets the default value this. pageSize = 10; this. numsOfLeft = 4; this. numsOfRight = 4; this. maxPage = 30 ;}

 

 

2. Branch View: this is a strong type View, which corresponds to the namespace of your project at the top.

@ Model ChengChenXu.com. pageModel. models. pageModel <ul class = "pagination"> @ {// page number logical Operation double d = (double) Model. dataCount/Model. pageSize; int pageNum = (int) Math. ceiling (d); Model. page = Model. page <1? 1: Model. Page; Model. Page = Model. Page> pageNum? PageNum: Model. Page; Model. PageSize = Model. PageSize> Model. MaxPage? Model. maxPage: Model. pageSize; int startNum, endNum; if (Model. page> Model. numsOfLeft) {endNum = Model. page + Model. numsOfRight;} else {endNum = Model. page + Model. numsOfRight + (Model. numsOfLeft-Model. page + 1);} if (pageNum-Model. page> = Model. numsOfRight) {startNum = Model. page-Model. numsOfLeft;} else {startNum = Model. page-Model. numsOfLeft-(Model. numsOfRight-(pageNum-Mod El. Page);} startNum = startNum <1? 1: startNum; endNum = endNum> pageNum? PageNum: endNum; // logic operation of the END page number // start displaying the page number // display the homepage if (pageNum = 1 | Model. page = 1) {<li class = "disabled"> <a href = "#" onclick = "return false;"> & laquo; </a> </li>} else {<li> <a href = "@ Model. url "> & laquo; </a> </li >}// END: display the homepage // display the page number for (int I = startNum; I <= endNum; I ++) {if (I = Model. page) {<li class = "active"> <a href = "#" onclick = "return false; "> @ I </a> </li>} else {<li> <a href =" @ Model. url @ I "> @ I </a> </li >}// END display page number // display the END page if (pageNum = 1 | Model. page = pageNum) {<li class = "disabled"> <a href = "#" onclick = "return false;"> & raquo; </a> </li>} else {<li> <a href = "@ Model. url @ pageNum "> & raquo; </a> </li >}// END display END page} </ul>

 

Usage:

1. Add the following code as needed:

The first parameter is the name of the Partial View File (to be placed in the Shared folder)

The second parameter is the PageModel object passed in by ViewBag on the page. Pay attention to the dynamic labels of the namespace and ViewBag.

@Html.Partial("PagePartial", ViewBag.PageModel as ChengChenXu.com.PageModel.Models.PageModel)

 

2. Create a PageModel object in the Controller and use ViewBag to pass

Public ActionResult Index (int id = 1, int pagesize = 10) {// simulate a List of 200 data records <string> list = new List <string> (); for (int I = 1; I <= 200; I ++) {list. add ("no." + I + "data");} ViewBag. list = list; // create the PageModel object Models. pageModel pm = new Models. pageModel (); pm. dataCount = list. count; // The total number of data items pm. page = id; // the current Page number (pm. pageSize = pagesize; // The number of pages per page. url = "/home/index/"; // URL ViewBag. pageModel = pm; // pass PageModel return View ();}

 

 

Generate code

For the style sheet, please design the pagination style using the Bootstrap framework directly in the DEMO.

　　　　　　<ul class="pagination">            <li class="disabled"><a href="#" onclick="return false;">&laquo;</a></li>                <li class="active"><a href="#" onclick="return false;">1</a></li>                <li><a href="/home/index/2">2</a></li>                <li><a href="/home/index/3">3</a></li>                <li><a href="/home/index/4">4</a></li>                <li><a href="/home/index/5">5</a></li>                <li><a href="/home/index/6">6</a></li>                <li><a href="/home/index/7">7</a></li>                <li><a href="/home/index/8">8</a></li>                <li><a href="/home/index/9">9</a></li>            <li><a href="/home/index/20">&raquo;</a></li>          </ul>

 

Download source code and DEMO:

ChengChenXu.com.PageModel.rar

 

This article is original to the blogger. for reprinting, please keep the source:
Http://chengchenxu.com/Article/22/mvc-fenye