分页是网页基本功能，这里主要讨论在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。