11、ASP.NET MVC入門到精通——AspnetMVC分頁

本系列目錄：ASP.NET MVC4入門到精通系列目錄彙總說起分頁，這基本上是我們Web開發中遇見得最多的場景，沒有之一，可即便如此，要做出比較優雅的分頁還是需要技巧的。這裡我先說一種ASP.NET MVC中很常見的一種分頁的實現方式，很low，但是很多公司的項目就是這麼用的，我現在公司的項目就是也...

本系列目錄：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框架的風行，分頁變得越來越簡單。

看著那些屎一樣的項目，無論點個啥東西都把整個界面刷新，而我又不得不天天用，弄得眼睛都被閃瞎了，可是又無能為力，真心很痛苦，都說前人挖坑後人填，可是有些時候，前人坑挖得後面的人沒時間填。不由得想起一個客戶說的話：“公司系統有點爛，體驗比較差，快遞有點慢，客服比較拽，售後有點差，運費比較高”。