Asp.net MVC分頁實例

分頁是網頁基本功能，這里主要討論在Asp.net MVC環境下分頁的前端實現，不涉及后台分頁。實現效果如下圖顯示：

Step 1.建立分頁信息類

    public class PagingInfo
    {
        public int TotalItmes { set; get; }
        public int ItemsPerPage { set; get; }
        public int CurrentPage { set; get; }
        public int TotalPages
        {
            get { return (int)Math.Ceiling((decimal)TotalItmes / ItemsPerPage); }
        }
    }

Step 2.建立HtmlHelper的分頁擴展方法

    public static class PagingHelpers
    {
        public static MvcHtmlString PageLinks(this HtmlHelper html,PagingInfo pagingInfo,Func<int,string> pageUrl)
        {
            StringBuilder result = new StringBuilder();
            result.Append("<ul>");

           
            if (pagingInfo.CurrentPage > 1)
            { 
                //建立首頁分頁鏈接
                result.Append("<li>");
                result.Append("<a href='");
                result.Append(pageUrl(1));
                result.Append("'>首頁</a>");
                result.Append("</li>");
                //建立上一頁分頁鏈接
                result.Append("<li>");
                result.Append("<a href='");
                result.Append(pageUrl(pagingInfo.CurrentPage-1));
                result.Append("'>上一頁</a>");
                result.Append("</li>");
            }

            for(int i=1;i<=pagingInfo.TotalPages;i++)
            {
                if(i<=2||i>=pagingInfo.CurrentPage-3&&i<=pagingInfo.CurrentPage+3||i>=pagingInfo.TotalPages-1)
                {
                    createPageLink(pagingInfo, pageUrl, result, i);
                }
                else if(result[result.Length-1]!='.')
                {
                    result.Append("...");
                }
            }

            if (pagingInfo.CurrentPage < pagingInfo.TotalPages)
            {
                //建立上一頁分頁鏈接
                result.Append("<li>");
                result.Append("<a href='");
                result.Append(pageUrl(pagingInfo.CurrentPage + 1));
                result.Append("'>下一頁</a>");
                result.Append("</li>");
                //建立首頁分頁鏈接
                result.Append("<li>");
                result.Append("<a href='");
                result.Append(pageUrl(pagingInfo.TotalPages));
                result.Append("'>末頁</a>");
                result.Append("</li>");
            }
            result.Append("</ul>");
            return MvcHtmlString.Create(result.ToString());
        }

        private static void createPageLink(PagingInfo pagingInfo, Func<int, string> pageUrl, StringBuilder result, int i)
        {
            if (i == pagingInfo.CurrentPage)
            {
                result.Append("<li class='current'>");
            }
            else
            {
                result.Append("<li>");
            }
            result.Append("<a href='");
            result.Append(pageUrl(i));
            result.Append("'>");
            result.Append(i);
            result.Append("</a>");
            result.Append("</li>");
        }
    }

擴展方法采用拼字符串的方式，也可以使用TagBuilder。

Step 3.添加Action

        public ActionResult Index(int page = 1)
        {
            PagingInfo pagingInfo = new PagingInfo {CurrentPage = page, TotalItmes = 100, ItemsPerPage = 5};
            return View(pagingInfo);
        }

這里TotalItems、ItemsPerPage均寫死數據，實際TotalItems應從數據庫統計計算，ItemsPerPage可以寫入Web.config的AppSettings，也可讀取數據庫。

Step 4.添加View

@using 分頁.HtmlHelpers
@model 分頁.Models.PagingInfo

<div class="pages">
    @Html.PageLinks(Model, x => Url.Action("Index", new { page = x }))
</div>

現在已經可以運行查看結果：

Step 5.添加CSS，修改樣式

.pages {
    margin: 20px auto;
    clear: both;
    width: 890px;
    text-align: center;
    padding: 10px 0px;
    text-align: center;
    font-size: 12px;
}

    .pages ul {
        display: inline;
        margin: 0 auto;
        width: 890px;
    }

    .pages li {
        display: inline;
        margin: 0 auto;
    }

    .pages a {
        padding: 7px 11px;
        border-radius: 3px;
        margin: 4px;
        background-color: #f2f3f5;
        border: #ddd 1px solid;
        color: #555;
        text-decoration: none;
    }

        .pages a:hover, li.current a {
            background-color: #CC0000;
            color: #FFFFFF;
            border: #CC0000 1px solid;
            text-decoration: none;
        }

這樣分頁顯示的前端部分就完成了，當然還有后台分頁、路由設置等等問題留待下次完成。另外部分代碼可修改用於WebForm。