MVC3 分頁Helper

　　利用mvc3實現分頁效果。效果圖如下：

　　

　　直接拷代碼：

　　首頁添加一個Helper的類（命名空間為System.Web.Mvc;）。　　　　

　　

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); //總頁數
            var output = new StringBuilder();
            if (totalPages > 1)
            {                
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首頁</a> ", redirectTo, pageSize);                
                if (currentPage > 1)
                {//處理上一頁的連接
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一頁</a> ", redirectTo, currentPage - 1, pageSize);
                }                

                output.Append(" ");
                int currint = 5;
                for (int i = 0; i <= 10; i++)
                {//一共最多顯示10個頁碼，前面5個，后面5個
                    if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
                    {
                        if (currint == i)
                        {//當前頁處理                            
                            output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
                        }
                        else
                        {//一般頁處理
                            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)
                {//處理下一頁的鏈接
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一頁</a> ", redirectTo, currentPage + 1, pageSize);
                }
                
                output.Append(" ");
                if (currentPage != totalPages)
                {
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末頁</a> ", redirectTo, totalPages, pageSize);
                }
                output.Append(" ");
            }
            output.AppendFormat("<label>第{0}頁 / 共{1}頁</label>", currentPage, totalPages);//這個統計加不加都行

            return new HtmlString(output.ToString());
        }

　　其次再添加兩個公共類：PagerInfo與PageQuery。PagerInfo類用於放置分頁相關內容。PageQuery則用於放置PagerInfo及要顯示的數據信息。

　　

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; }
    }

　　然后在Controller里面添加Action

　　

public ActionResult Index(int? pageSize,int? pageIndex)
        {
            int pageIndex1 = pageIndex ?? 1;
            int pageSize1 = pageSize ?? 5;
            int count=0;
            //從數據庫在取得數據，並返回總記錄數
            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);
        }

　　最要在View里的部分代碼如下：

　　@model PagerQuery<PagerInfo, IQueryable<_6_16DFAZ_Models.news>>

　　最后在body里面要顯示的數據如下：　　

 <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", new { id = item.id }) |
                                    @Html.ActionLink("刪除", "Delete", new { id = item.id })
                                </td>
                            </tr>
                        }
                        @*分頁*@
                        <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>

　　ok.分頁效果已經實現。為了美觀，再添加一些樣式。　　

　　

.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;    
}

　　最終的顯示圖如下：

　

　　大功告成！