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 > )
             {
                 //建立首页分页链接
                 result.Append("<li>");
                 result.Append("<a href='");
                 result.Append(pageUrl());
                 result.Append("'>首页</a>");
                 result.Append("</li>");
                 //建立上一页分页链接
                 result.Append("<li>");
                 result.Append("<a href='");
                 result.Append(pageUrl(pagingInfo.CurrentPage-));
                 result.Append("'>上一页</a>");
                 result.Append("</li>");
             }

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

             if (pagingInfo.CurrentPage < pagingInfo.TotalPages)
             {
                 //建立上一页分页链接
                 result.Append("<li>");
                 result.Append("<a href='");
                 result.Append(pageUrl(pagingInfo.CurrentPage + ));
                 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 = )
        {
            PagingInfo pagingInfo = new PagingInfo {CurrentPage = page, TotalItmes = , ItemsPerPage = };
            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。