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。