ASP.NET MVC 分頁之 局部視圖
阿新 • • 發佈：2018-01-04
eric body doctype javascrip cert ppp 位置 mage ems
using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Cryptography.X509Certificates;
using System.Web;
namespace MvcAppPager.Models
{
public interface IPageOfList
{
long CurrentStart { get; }
int PageIndex { get; set; }
int PageSize { get; set; }
int PageTotal { get; }
long RecordTotal { get; set; }
}
public interface IPageOfList<T> : IPageOfList, IList<T>
{
}
public class PageOfList<T>:List<T>,IList<T>,IPageOfList,IPageOfList<T>
{
public PageOfList(IEnumerable<T> items, int pageIndex, int pageSize, long recordTotal)
{
if (items!=null)
AddRange(items);
PageIndex = pageIndex;
PageSize = pageSize;
RecordTotal = recordTotal;
}
public PageOfList(int pageSize)
{
if (pageSize <= 0)
{
throw new ArgumentException("頁面數據量必須大於0", "頁面數據量");
}
}
public int PageIndex { get; set; }
public int PageSize { get; set; }
public int PageTotal
{
get
{
//RecordTotal / PageSize 獲取能夠被布滿的頁面數，(RecordTotal % PageSize > 0 ? 1 : 0）判斷是否有未布滿的頁面。
return (int)RecordTotal / PageSize + (RecordTotal % PageSize > 0 ? 1 : 0);
}
}
public long RecordTotal { get; set; }
/// <summary>
/// 當前頁面的記錄開始位置
/// </summary>
public long CurrentStart
{
get { return PageIndex * PageSize + 1; }
}
/// <summary>
/// 當前頁面的結束位置
/// </summary>
public long CurrentEnd
{
get { return (PageIndex + 1) * PageSize > RecordTotal ? RecordTotal : (PageIndex + 1) * PageSize; }
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcAppPager.Models
{
public class Order
{
public int ID { get; set; }
public string OrderNo { get; set; }
public decimal WayFee { get; set; }
public string EMS { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcAppPager.Models;
namespace MvcAppPager.Controllers
{
public class HomeController : Controller
{
List<Order> list=new List<Order>
{
new Order{ID=1,OrderNo="2016050501",WayFee = 20,EMS = "C01111"},
new Order{ID=2,OrderNo="2016050502",WayFee = 20,EMS = "C01112"},
new Order{ID=3,OrderNo="2016050503",WayFee = 20,EMS = "C01113"},
new Order{ID=4,OrderNo="2016050504",WayFee = 20,EMS = "C01114"},
new Order{ID=5,OrderNo="2016050505",WayFee = 20,EMS = "C01115"},
new Order{ID=6,OrderNo="2016050506",WayFee = 20,EMS = "C01116"},
};
private const int PageSize = 2;
private int counts;
//
// GET: /Home/
public ActionResult Index(int pageIndex=0)
{
counts = list.Count;
list = list.Skip(PageSize * pageIndex).Take(PageSize).ToList();
PageOfList<Order> _ordersList=new PageOfList<Order>(list,pageIndex,PageSize,counts);
return View(_ordersList);
}
}
}
@model MvcAppPager.Models.IPageOfList
@Styles.Render("~/Content/page.css")
<div class="fenye"><span>共 @Model.RecordTotal 條 記錄，每頁 @Model.PageSize 條 </span>
@{
System.Web.Routing.RouteValueDictionary route = new System.Web.Routing.RouteValueDictionary();
foreach (var key in Html.ViewContext.RouteData.Values.Keys)
{
route[key] = Html.ViewContext.RouteData.Values[key];
}
foreach (string key in Html.ViewContext.RequestContext.HttpContext.Request.QueryString)
{
route[key] = Html.ViewContext.RequestContext.HttpContext.Request.QueryString[key];
}
if (Model.PageIndex <= 0)
{
<a class="backpage" href="javascript:void(0);">上一頁</a>
}
else
{
route["pageIndex"] = Model.PageIndex - 1;
Html.ActionLink("上一頁", route["action"].ToString(), route).ToHtmlString();
}
if (Model.PageIndex > 3)
{
route["pageIndex"] = 0;
Html.ActionLink("<b>1</b>", route["action"].ToString(), route).ToHtmlString().Replace("<", "<").Replace(">", ">");
if (Model.PageIndex >= 5)
{
<a href=‘#‘>..</a>;
}
}
for (int i = Model.PageIndex - 2; i <= Model.PageIndex; i++)
{
if (i < 1)
{continue;}
route["pageIndex"] = i - 1;
@Html.ActionLink(i.ToString(), route["action"].ToString(), route["controller"]);
}
<a class=‘active‘ href=‘#‘><b> @(Model.PageIndex+1) </b></a>
for (var i = Model.PageIndex + 2; i <= Model.PageIndex + 4; i++)
{
if (i > Model.PageTotal)
{continue;}
else{
route["pageIndex"] = i - 1;
@Html.ActionLink(i.ToString(), route["action"].ToString(), route);
}
}
if (Model.PageIndex < Model.PageTotal - 4)
{
if (Model.PageIndex <= Model.PageTotal - 6)
{
<a href=‘#‘>..</a>
}
route["pageIndex"] = Model.PageTotal - 1;
@Html.ActionLink(Model.PageTotal.ToString(), route["action"].ToString(), route).ToHtmlString();
}
if (Model.PageIndex < Model.PageTotal - 1)
{
route["pageIndex"] = Model.PageIndex + 1;
Html.ActionLink("下一頁", route["action"].ToString(), route).ToHtmlString();
}
else
{
<a class="nextpage" href="javascript:void(0);">下一頁</a>
}
}
</div>
@model MvcAppPager.Models.PageOfList<MvcAppPager.Models.Order>
@{
Layout = null;
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
@Styles.Render("~/Content/page.css")
</head>
<body>
<div id="body" style="width: 400px;float: left">
@using (Html.BeginForm("Index","Home",FormMethod.Get))
{
<table>
<tr>
<th>ID</th>
<th>訂單號</th>
<th>運單號</th>
<th>運費</th>
</tr>
@if (Model != null && Model.Count > 0)
{
foreach (var item in Model.ToList())
{
<tr>
<td>@item.ID</td>
<td>@item.OrderNo</td>
<td>@item.EMS</td>
<td>@item.WayFee</td>
</tr>
}
}
</table>
Html.RenderPartial("pager", Model);
}
</div>
</body>
</html>
.fenye {
float: right;
}
.fenye a,.fenye span,.fenye select {
display: block;
float: left;
margin: 0 2px;
}
.fenye a {
background: #fff;
border: 1px solid #d6d6d6;
color: #6f6f6f;
height: 22px;
line-height: 22px;
margin: 0 2px;
padding: 0 0 0 8px;
position: relative;
}
.fenye a.nextpage:hover {
background: #fff;
border: 1px solid #ba191b;
color: #000;
}
.fenye a.nextpage {
height: 22px;
margin: 0 0 0 2px;
padding: 0px 5px;
}
.fenye a.backpage {
background: #fff;
border: 1px solid #d6d6d6;
height: 22px;
margin: 0 2px 0 0;
padding: 0px 5px;
}
.fenye a.backpage:hover {
background: url("images/pagebut.gif") no-repeat scroll left top rgba(0, 0, 0, 0);
color: #000;
}
.fenye a:hover,.fenye a.active {
background: #c32325;
border: 1px solid #ba191b;
color: #ffffff;
text-decoration: none;
}
.fenye a.shenlue {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0 5px;
padding: 0;
border: none;
}
.fenye a.shenlue:hover {
color: #333333;
}
.fenye a b {
display: block;
font-size: 12px;
font-weight: normal;
height: 22px;
line-height: 22px;
margin-right: 0;
padding: 0 8px 0 0;
position: relative;
}
ASP.NET MVC 分頁之 局部視圖