ASP.NET MVC分頁實現 - zuowj－IT工程師數位筆記本

文章出處

ASP.NET MVC中不能使用分頁控件，所以我就自己寫了一個分頁局部視圖，配合PageInfo類，即可實現在任何頁面任意位置呈現分頁，由于采用的是基于POST分頁方式，所以唯一的限制就是必須放在FORM中,當然以后我會考慮實現基于URL分頁的！

一、PageInfo類

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5  
  6 namespace ROIS.Models
  7 {
  8     /// <summary>
  9     /// 分頁信息
 10     /// </summary>
 11     public class PageInfo
 12     {
 13         private int _RecordCount = 0;
 14         private int _PageSize = 10;
 15         private int _CurrentPageNo=1;
 16  
 17         /// <summary>
 18         /// 獲取或設置記錄總數
 19         /// </summary>
 20         public int RecordCount
 21         {
 22             get
 23             {
 24                 return _RecordCount;
 25             }
 26             set
 27             {
 28                 if (value > 0)
 29                 {
 30                     _RecordCount = value;
 31                 }
 32             }
 33         }
 34  
 35         /// <summary>
 36         /// 獲取或設置每頁記錄數
 37         /// </summary>
 38         public int PageSize
 39         {
 40             get {
 41                 return _PageSize;
 42             } 
 43             set {
 44                 if (value > 0)
 45                 {
 46                     _PageSize = value;
 47                 }
 48             }
 49         }
 50  
 51         /// <summary>
 52         /// 獲取或設置當前索引頁碼(從1開始計算)
 53         /// </summary>
 54         public int CurrentPageNo
 55         {
 56             get {
 57                 return _CurrentPageNo;
 58             }
 59  
 60             set {
 61                 if (value > 0)
 62                 {
 63                     if (value > this.PageCount)
 64                     {
 65                         _CurrentPageNo = this.PageCount;
 66                     }
 67                     else
 68                     {
 69                         _CurrentPageNo = value;
 70                     }
 71                 }
 72             } 
 73         }
 74  
 75         /// <summary>
 76         /// 獲取總頁數
 77         /// </summary>
 78         public int PageCount
 79         {
 80             get
 81             {
 82                 if (this.RecordCount <= 0)
 83                 {
 84                     return 1;
 85                 }
 86  
 87                 return this.RecordCount / this.PageSize + (this.RecordCount % this.PageSize > 0 ? 1 : 0);
 88             }
 89         }
 90  
 91         public PageInfo()
 92         { }
 93  
 94         public PageInfo(int recordCount, int currentPageNo, int pageSize = 10)
 95         {
 96             this.RecordCount = recordCount;
 97             this.PageSize = pageSize;
 98             this.CurrentPageNo = currentPageNo;
 99         }
100  
101  
102         /// <summary>
103         /// 是否為首頁
104         /// </summary>
105         /// <returns></returns>
106         public bool IsFirstPage()
107         {
108             return (this.CurrentPageNo <= 1);
109         }
110  
111  
112         /// <summary>
113         /// 是否為末頁
114         /// </summary>
115         /// <returns></returns>
116         public bool IsLastPage()
117         {
118             return (this.CurrentPageNo>=this.PageCount);
119         }
120  
121     }
122 }
123

二、_Pager局部視圖(建議放在Shared目錄下)

@using ROIS.Models;
 
@model PageInfo
 
@if (Model!=null && Model.RecordCount > 0)
{           
<div class="pager">
    第@(Model.CurrentPageNo) 頁&nbsp;/&nbsp;共@(@Model.PageCount)頁,
@if (Model.IsFirstPage())
{
    <span>|&lt;首&nbsp;&nbsp;頁</span>
    <span>&lt;上一頁</span>
}
else
{
    <a href="javascript:turnPage(1);">|&lt;首&nbsp;&nbsp;頁</a>
    <a href="javascript:turnPage(@(Model.CurrentPageNo-1));">&lt;上一頁</a>
}
@if (Model.IsLastPage())
{
    <span>下一頁&gt;</span>
    <span>末&nbsp;&nbsp;頁&gt;|</span>
}
else
{
     <a href="javascript:turnPage(@(Model.CurrentPageNo+1));">下一頁&gt;</a>
     <a href="javascript:turnPage(@Model.PageCount);">末&nbsp;&nbsp;頁&gt;|</a>
}
轉到：
<select id="pages" onchange="javascript:turnPage(this.value);">
    @for (int i = 1; i <= Model.PageCount; i++)
    {
        if (Model.CurrentPageNo == i)
        {
        <option value="@i" selected="selected">第@(i)頁</option>
        }
        else
        {
        <option value="@i">第@(i)頁</option>
        }
    }
</select>
<input type="hidden" id="_pageno" name="_pageno" />
</div>
<script type="text/javascript">
<!--
    function turnPage(pageNo) {
        var oPageNo = document.getElementById("_pageno");
        oPageNo.value = pageNo;
        oPageNo.form.submit();
    }
 
    function getForm(obj) { //這個沒有用到，但可以取代上面的oPageNo.form
        if (obj.parentNode.nodeName.toLowerCase() == "form") {
            return obj.parentNode;
        } else {
            getForm(obj.parentNode);
        }
    }
//-->
</script>
 
}