Asp.net MVC分页实例

浏览数：37 / 时间：2015年06月09日

分页是网页基本功能，这里主要讨论在Asp.net MVC环境下分页的前端实现，不涉及后台分页。实现效果如下图显示：

Step 1.建立分页信息类

 1     public class PagingInfo
 2     {
 3         public int TotalItmes { set; get; }
 4         public int ItemsPerPage { set; get; }
 5         public int CurrentPage { set; get; }
 6         public int TotalPages
 7         {
 8             get { return (int)Math.Ceiling((decimal)TotalItmes / ItemsPerPage); }
 9         }
10     }

Step 2.建立HtmlHelper的分页扩展方法

 1     public static class PagingHelpers
 2     {
 3         public static MvcHtmlString PageLinks(this HtmlHelper html,PagingInfo pagingInfo,Func<int,string> pageUrl)
 4         {
 5             StringBuilder result = new StringBuilder();
 6             result.Append("<ul>");
 7 
 8            
 9             if (pagingInfo.CurrentPage > 1)
10             { 
11                 //建立首页分页链接
12                 result.Append("<li>");
13                 result.Append("<a href=‘");
14                 result.Append(pageUrl(1));
15                 result.Append("‘>首页</a>");
16                 result.Append("</li>");
17                 //建立上一页分页链接
18                 result.Append("<li>");
19                 result.Append("<a href=‘");
20                 result.Append(pageUrl(pagingInfo.CurrentPage-1));
21                 result.Append("‘>上一页</a>");
22                 result.Append("</li>");
23             }
24 
25             for(int i=1;i<=pagingInfo.TotalPages;i++)
26             {
27                 if(i<=2||i>=pagingInfo.CurrentPage-3&&i<=pagingInfo.CurrentPage+3||i>=pagingInfo.TotalPages-1)
28                 {
29                     createPageLink(pagingInfo, pageUrl, result, i);
30                 }
31                 else if(result[result.Length-1]!=‘.‘)
32                 {
33                     result.Append("...");
34                 }
35             }
36 
37             if (pagingInfo.CurrentPage < pagingInfo.TotalPages)
38             {
39                 //建立上一页分页链接
40                 result.Append("<li>");
41                 result.Append("<a href=‘");
42                 result.Append(pageUrl(pagingInfo.CurrentPage + 1));
43                 result.Append("‘>下一页</a>");
44                 result.Append("</li>");
45                 //建立首页分页链接
46                 result.Append("<li>");
47                 result.Append("<a href=‘");
48                 result.Append(pageUrl(pagingInfo.TotalPages));
49                 result.Append("‘>末页</a>");
50                 result.Append("</li>");
51             }
52             result.Append("</ul>");
53             return MvcHtmlString.Create(result.ToString());
54         }
55 
56         private static void createPageLink(PagingInfo pagingInfo, Func<int, string> pageUrl, StringBuilder result, int i)
57         {
58             if (i == pagingInfo.CurrentPage)
59             {
60                 result.Append("<li class=‘current‘>");
61             }
62             else
63             {
64                 result.Append("<li>");
65             }
66             result.Append("<a href=‘");
67             result.Append(pageUrl(i));
68             result.Append("‘>");
69             result.Append(i);
70             result.Append("</a>");
71             result.Append("</li>");
72         }
73     }

扩展方法采用拼字符串的方式，也可以使用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;
        }