11、ASP.NET MVC入门到精通——AspnetMVC分页

本系列目录：ASP.NET MVC4入门到精通系列目录汇总

说起分页，这基本上是我们Web开发中遇见得最多的场景，没有之一，可即便如此，要做出比较优雅的分页还是需要技巧的。这里我先说一种ASP.NET MVC中很常见的一种分页的实现方式，很low，但是很多公司的项目就是这么用的，我现在公司的项目就是也是，有时候面对公司项目屎一样的用户体验和杂乱的代码，真是恨不能重写，可是往往又眼睁睁的看着它继续在运行，继续摧残着客户，又无能为力，有时候甚至为了赶进度，还被迫强奸式的复制原有的代码。

方式一：自定义Html扩展方法

效果如下：

1、新建接口IPageOfList

    public interface IPageOfList
    {
        long CurrentStart { get; }
        int PageIndex { get; set; }
        int PageSize { get; set; }
        int PageTotal { get; }
        long RecordTotal { get; set; }
    }

2、新建一个Html扩展方法

     public static MvcHtmlString UlPaging(this HtmlHelper helper, IPageOfList list)
        {
            StringBuilder sb = new StringBuilder();

            if (list == null)
            {
                return new MvcHtmlString(sb.ToString());
            }

            sb.AppendLine("<div class=\"fenye\">" + string.Format("<span>共 {0} 条 记录，每页 {1} 条 &nbsp;</span>", list.RecordTotal, list.PageSize));

            //sb.AppendLine(" <ul class=\"pagination\">");
            System.Web.Routing.RouteValueDictionary route = new System.Web.Routing.RouteValueDictionary();
            foreach (var key in helper.ViewContext.RouteData.Values.Keys)
            {
                route[key] = helper.ViewContext.RouteData.Values[key];
            }

            foreach (string key in helper.ViewContext.RequestContext.HttpContext.Request.QueryString)
            {
                route[key] = helper.ViewContext.RequestContext.HttpContext.Request.QueryString[key];
            }

            if (list.PageIndex <= 0)
            {
                sb.AppendLine("<a class=\"backpage\" href=\"javascript:void(0);\">上一页</a>");
            }
            else
            {
                route["pageIndex"] = list.PageIndex - 1;
                //sb.AppendLine(" <li class=\"prev " + (list.PageIndex == 0 ? "disabled" : "") + "\">" + helper.ActionLink("← 上一页", route["action"].ToString(), route).ToHtmlString() + "</li>");
                sb.AppendLine(helper.ActionLink("上一页", route["action"].ToString(), route).ToHtmlString());
            }

            if (list.PageIndex > 3)
            {
                route["pageIndex"] = 0;
                sb.AppendLine(helper.ActionLink(@"<b>1</b>", route["action"].ToString(), route).ToHtmlString().Replace("&lt;", "<").Replace("&gt;", ">"));
                //sb.AppendLine(" <li>" + helper.ActionLink("1", route["action"].ToString(), route).ToHtmlString() + "</li>");
                if (list.PageIndex >= 5)
                {
                    sb.AppendLine("<a href='#'>..</a>");
                }
            }

            for (int i = list.PageIndex - 2; i <= list.PageIndex; i++)
            {
                if (i < 1)
                    continue;
                route["pageIndex"] = i - 1;
                //sb.AppendLine("<li" + (i == list.PageIndex + 1 ? " class=\"active\"" : "") + ">" + helper.ActionLink(i.ToString(), route["action"].ToString(), route).ToHtmlString() + "</li>");
                sb.AppendLine(helper.ActionLink(@"<b>" + i.ToString() + @"</b>", route["action"].ToString(), route).ToHtmlString().Replace("&lt;", "<").Replace("&gt;", ">"));
            }

            sb.AppendLine(@"<a class='active' href='#'><b>" + (list.PageIndex + 1) + @"</b></a>");
            for (var i = list.PageIndex + 2; i <= list.PageIndex + 4; i++)
            {
                if (i > list.PageTotal)
                    continue;
                route["pageIndex"] = i - 1;
                sb.AppendLine(helper.ActionLink(@"<b>" + i.ToString() + @"</b>", route["action"].ToString(), route).ToHtmlString().Replace("&lt;", "<").Replace("&gt;", ">"));
                //sb.AppendLine("<li" + (i == list.PageIndex + 1 ? " class=\"active\"" : "") + ">" + helper.ActionLink(i.ToString(), route["action"].ToString(), route).ToHtmlString() + "</li>");
            }

            if (list.PageIndex < list.PageTotal - 4)
            {
                if (list.PageIndex <= list.PageTotal - 6)
                {
                    sb.AppendLine("<a href='#'>..</a>");
                }
                route["pageIndex"] = list.PageTotal - 1;

                sb.AppendLine(helper.ActionLink(@"<b>" + list.PageTotal.ToString() + "</b>", route["action"].ToString(), route).ToHtmlString().Replace("&lt;", "<").Replace("&gt;", ">"));
                //sb.AppendLine(" <li>" + helper.ActionLink(list.PageTotal.ToString(), route["action"].ToString(), route).ToHtmlString() + "</li>");
            }
            if (list.PageIndex < list.PageTotal - 1)
            {
                route["pageIndex"] = list.PageIndex + 1;
                sb.AppendLine(helper.ActionLink("下一页", route["action"].ToString(), route).ToHtmlString());
                //sb.AppendLine("<li class=\"next\">" + helper.ActionLink("下一页 →", route["action"].ToString(), route).ToHtmlString() + "</li>");, new { @class = "nextpage" }
            }
            else
            {
                sb.AppendLine("<a class=\"nextpage\" href=\"javascript:void(0);\">下一页</a>");
                //sb.AppendLine("<li class=\"nextpage disabled\"><a href=\"javascript:void(0);\">下一页 →</a></li>");
            }
            sb.AppendLine("</div>");
            return new MvcHtmlString(sb.ToString());
        }

3、界面调用

@model ProjectBase.Utils.Entities.PageOfList<Uuch.MSD.Core.Orders.Order>

@Uuch.MSD.App_Start.WebHtmlHelper.UlPaging(this.Html, Model)

为什么说这代码屎一样的？

界面看上去还行对吧，其实你看那个“...”点击了是没反应的，即便到了最后一页，那个“下一页”按钮也还是显示的，还有，没有跳转到指定页的功能，当然，这些都可以自己再扩展，但是我就纳闷了，有必要每一个零件都自己重新开发吗？我们做软件开发的，其实就像工厂里做组装的，把现成的零部件按照图纸拼起来就可以了，完全不需要每一个零部件重新做。

1、用户体验极差，每次点击下一页，整个界面刷新。

2、扩展性极差，各种硬编码

3、功能很弱

方式二：第三方UI组件

用过第三方UI控件的都知道，咱们作为Web后台开发人员，可以节省许多调整样式和用原生js或者jquery实现一些功能的时间，也基本上用不着去考虑各种蛋疼的兼容性问题，因为这些问题，UI组件都替我们实现了。诸如ExtJs，easyUI，MiniUI，bootstrapts等等。

大家可以看下我之前写的ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页) 在这里我使用的是基于jquery的dataTables来实现的。

和方式一比较的优点在于

1、用户体验好，都是Ajax局部刷新的，而且可以支持一次性读取所有，然后在内存中分页(对于数据量不大的表而言，这样的分页效率很高)，其次支持服务器分页。

2、扩展性好，界面的样式和显示都是可以通过属性来配置的，基本上不存在所谓的硬编码。

3、功能强大

大家有什么好的想法，说出来大家一起探讨下吧！

在以前，没有使用ORM框架，使用ADO.Net的年代，我们通常分页都是写分页存储过程来实现分页的，但是随着ORM框架的风行，分页变得越来越简单。

看着那些屎一样的项目，无论点个啥东西都把整个界面刷新，而我又不得不天天用，弄得眼睛都被闪瞎了，可是又无能为力，真心很痛苦，都说前人挖坑后人填，可是有些时候，前人坑挖得后面的人没时间填。不由得想起一个客户说的话：“公司系统有点烂，体验比较差，快递有点慢，客服比较拽，售后有点差，运费比较高”。