首页 > 代码库 > Asp.net MVC分页实例
Asp.net MVC分页实例
分页是网页基本功能，这里主要讨论在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=http://www.mamicode.com/‘");14 result.Append(pageUrl(1));15 result.Append("‘>首页</a>");16 result.Append("</li>");17 //建立上一页分页链接18 result.Append("<li>");19 result.Append("<a href=http://www.mamicode.com/‘");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=http://www.mamicode.com/‘");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=http://www.mamicode.com/‘");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 else63 {64 result.Append("<li>");65 }66 result.Append("<a href=http://www.mamicode.com/‘");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; }
这样分页显示的前端部分就完成了，当然还有后台分页、路由设置等等问题留待下次完成。另外部分代码可修改用于WebForm。
Asp.net MVC分页实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。