一个简单的MVC Html扩展分页

  MVC中有一个@Html.XXX,接触过MVC的人都应该不陌生。现在来介绍一个简单的@Html扩展的分页方法。

  

  Model:首先准备好我们的数据对象,这里需要三个对象。

  1>分页对象

public class PagingInfo
    {
        //总共有多少条数据
        public int TotalItems { get; set; }
        //每页几条数据
        public int ItemsPerPage { get; set; }
        //当前页是第几页
        public int CurrentPage { get; set; }
        //总共多少页
        public int TotalPages
        {
            get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
        }
    }

  2>自己的数据对象(这里用Member)    

  public class Member
    {
        /// <summary>
        /// 用户Id
        /// </summary>
        public Guid MemberId { get; set; }
        /// <summary>
        /// 用户名
        /// </summary>
        public string NickName { get; set; }

    }

  3>上述两个对象的集合对象。(我们的View的页面对象类型就是这个)    

 public class MemberViewModel
    {
        /// <summary>
        /// 用户信息集合
        /// </summary>
        public IEnumerable<Member> members { get; set; }
        /// <summary>
        /// 分页信息
        /// </summary>
        public PagingInfo pagingInfo { get; set; }
    }

  Controller:数据对象现在有了,就需要Controller为我们返回我们需要的数据了,基本的模板如下:  

     MemberViewModel  memberViewModel = new   MemberViewModel
            {
                members=memberList,
                
                pagingInfo = new PagingInfo
                {
                    CurrentPage = currentPage,
                    ItemsPerPage = perItems,
                    TotalItems = messageList.Count()
                }
            };
            return memberViewModel;

  View:页面上也需要做一些改变。这里的PageShow和PageLinks就是我们后面要写的扩展方法。  

@model MemberViewModel

...........此处省略各种标签

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="paginator" align="left" valign="bottom" nowrap="true">
            @Html.PageShow(Model.PagingInfo)
         </td>
         <td style="width:60%;"></td>
        <td  align="right" class="paginator" valign="bottom" nowrap="true">
              @Html.PageLinks(Model.PagingInfo, x => Url.Action("Index", new { currentPage = x }))
        </td>
    </tr>
</table>

  一切准备就绪,现在就进入正题,看一下我们的分页扩展方法到底是怎么样的吧!  

 public static class PagingHelpers
    {
        /// <summary>
        /// 上图分页右边的 页数信息
        /// </summary>
        /// <param name="html"></param>
        /// <param name="pagingInfo"></param>
        /// <param name="pageUrl"></param>
        /// <returns></returns>
        public static MvcHtmlString PageLinks(this System.Web.Mvc.HtmlHelper html, PagingInfo pagingInfo, Func<int, string> pageUrl)
        {
            //新建StringBuilder实例result       将他作为最终的html字符串生成相应的标签 
            StringBuilder result = new StringBuilder();
            
            if (pagingInfo.TotalPages != 0)
            {
                //首页 前页
                TagBuilder tagFirst = new TagBuilder("a");
                //a标签的值
                tagFirst.InnerHtml = "首页";
                TagBuilder tagPrior = new TagBuilder("a");
                tagPrior.InnerHtml = "前页";
                //如果当前页不是第一页,那么首页和前页应该是可以点击的,同理 后页和尾页就不注释了
                if (pagingInfo.CurrentPage != 1)
                {
                    tagFirst.MergeAttribute("href", pageUrl(1));
                    tagPrior.MergeAttribute("href", pageUrl(pagingInfo.CurrentPage - 1));
                }
                //将标签tostring后 追加到StringBuilder
                result.Append(tagFirst.ToString());
                result.Append(tagPrior.ToString());

                //页数
                //这里只显示当前页的 前后3页
                for (int i = pagingInfo.CurrentPage - 3; i <= pagingInfo.CurrentPage + 3; i++)
                {
                    //不允许生成 小于1 或大于总页数的  a标签
                    if (i > 0 && i <= pagingInfo.TotalPages)
                    {
                        //使用TagBuilder创建a标签
                        TagBuilder tag = new TagBuilder("a");
                        //当前a标签的跳转地址
                        if (i != pagingInfo.CurrentPage)
                            tag.MergeAttribute("href", pageUrl(i));

                        if (i == pagingInfo.CurrentPage)
                            tag.MergeAttribute("class", "cpb");
                        //以数字代表a标签的显示内容
                        tag.InnerHtml = i.ToString();

                        result.Append(tag.ToString());
                    }
                }
                //后页 尾页
                TagBuilder tagAfter = new TagBuilder("a");
                tagAfter.InnerHtml = "后页";
                TagBuilder tagEnd = new TagBuilder("a");
                tagEnd.InnerHtml = "尾页";
                if (pagingInfo.CurrentPage != pagingInfo.TotalPages)
                {
                    tagAfter.MergeAttribute("href", pageUrl(pagingInfo.CurrentPage + 1));
                    tagEnd.MergeAttribute("href", pageUrl(pagingInfo.TotalPages));
                }
                result.Append(tagAfter.ToString());
                result.Append(tagEnd.ToString());
            }

            //创建html标签 返回!!!
            return MvcHtmlString.Create(result.ToString());
        }
        /// <summary>
        /// 上图分页左边的 页面信息显示
        /// </summary>
        /// <param name="html"></param>
        /// <param name="pagingInfo"></param>
        /// <returns></returns>
        public static MvcHtmlString PageShow(this System.Web.Mvc.HtmlHelper html, PagingInfo pagingInfo)
        {
            //新建StringBuilder实例result 将他作为最终的html字符串 生成相应的 标签 
            StringBuilder result = new StringBuilder();
            if (pagingInfo.TotalPages != 0)
            {
                result.Append("<font color='#ff6600'><b>" + pagingInfo.CurrentPage + "</b></font> / " + pagingInfo.TotalPages + " 页,每页<font color='#ff6600'><b>" + pagingInfo.ItemsPerPage + "</b></font> 条,共 <font color='#ff6600'><b>" + pagingInfo.TotalItems + "</b></font> 条");
            }
            return MvcHtmlString.Create(result.ToString());
        }
    }

  把这两个方法简化一下,其实就是:

    1>StringBuilder result=new StringBuilder(); 实例化可变字符串

    2>TagBuilder tag=new TagBuilder("XX");  result.Append(tag.ToString());  创建标签,追加到result

    3>return MvcHtmlString.Create(result.ToString());  返回result

  这里要说一下的是方法PageLinks的参数Func<int,string> pageUrl,他是一个委托,意思是传进一个int参数,返回一个string结果。这个和View中的

x=>Url.Action("Index",new{currentPage=x})是对应的。这个我理解的也不是很深入,求指点。基本上这个简单的分页就是这样了!

        

  

  

  

posted @ 2013-01-30 14:13  小飞的DD  阅读(623)  评论(0编辑  收藏  举报