使用MVCPager進行博客園首頁列表數據的分頁顯示功能

在前一篇博客中使用正則表達式抓取博客園列表數據，我通過正則表達式抓取了博客園的部分數據作為測試數據，現在測試數據也有了，就應該進行數據的分頁顯示了。

但是如何分頁這倒是讓我猶豫了好幾分鍾，是自己寫javascript來自定義分頁顯示，還是通過現成的控件來進行分頁，通過自定義分頁可以完全的對分頁進行控制，但是會很耗費時間，這對於js功能很差的我就是個難題，但是為了盡快的能實現這個分頁功能，我依然采用了分頁控件進行分頁，如果以后有機會我再手動寫一個分頁js來進行分頁。

因為我使用的是MVC 3 Razor引擎，所以我找了一個我在web form時代使用的aspNetPager同一個作者的MvcPager控件。不得不說這個控件確實挺強大的，我也慢慢的探索着在我的Mvc系統中實現了分頁功能。

作為MvcPager的使用者，雖然作者的官網有很多實例，但是那都是單獨的實例，不具有完整性，所以我來介紹一下我在系統中使用MvcPager的過程，如果有什么說的不對的地方，還請大家指點。

首先，我們應該獲取MvcPager控件的程序集，但是我們最好不要直接獲取程序集，而是要獲取MvcPager的源代碼，因為我們要對他的源代碼進行部分的修改，以更合適的使用它。

下載好了MVcPager源代碼以后，我們就先來修改一下那個分頁使用的類PagedList。

public class PagedList<T> : List<T>,IPagedList
    {
        public PagedList(IList<T> items, int pageIndex, int pageSize)//這是IList類型
        {
            PageSize = pageSize;
            TotalItemCount = items.Count;
            CurrentPageIndex = pageIndex;
            for (int i = StartRecordIndex - 1; i < EndRecordIndex; i++)
            {
                Add(items[i]);
            }
        }

        public PagedList(IEnumerable<T> items, int pageIndex, int pageSize, int totalItemCount)//這是IEnumerable類型，
                                                   //我們使用C#語言，所以要多添加這么一個類型
        {
            AddRange(items);
            TotalItemCount = totalItemCount;
            CurrentPageIndex = pageIndex;
            PageSize = pageSize;
        }

        public int CurrentPageIndex { get; set; }
        public int PageSize { get; set; }
        public int TotalItemCount { get; set; }
        public int TotalPageCount { get { return (int)Math.Ceiling(TotalItemCount / (double)PageSize); } }
        public int StartRecordIndex { get { return (CurrentPageIndex - 1) * PageSize + 1; } }
        public int EndRecordIndex { get { return TotalItemCount > CurrentPageIndex * PageSize ? CurrentPageIndex * PageSize : TotalItemCount; } }
    }

2.在我們修改了PagedList類以后，還要修改哪些地方呢？還有一個擴展方法，用來擴展PagedList

public static class PageLinqExtensions
    {
        public static PagedList<T> ToPagedList<T>
            (
                this IEnumerable<T> allItems,
                int pageIndex,
                int pageSize
            )
        {
            if (pageIndex < 1)
                pageIndex = 1;
            var itemIndex = (pageIndex-1) * pageSize;
            var pageOfItems = allItems.Skip(itemIndex).Take(pageSize);
            var totalItemCount = allItems.Count();
            return new PagedList<T>(pageOfItems, pageIndex, pageSize, totalItemCount);
        }
    }

3.在我們修改了擴展方法以后，就可以在IEnumerable以后進行.ToPagedList<T>轉換成PagedList 分頁類

將獲取到的分頁列表數據轉換為PagedList類型以后，我們就要使用MvcPager來進行分頁顯示

我們定義了博客列表顯示Controller，將從數據庫中獲取到的列表數據通過MvcPager分頁

@{
    Layout = null;
}
@using Webdiyer.WebControls.Mvc
@model PagedList<Models.BlogInfo>
@{
    foreach (Models.BlogInfo blogInfo in Model)
    {
    <div class="post_item">
        <div class="digg">
            <div class="diggit">
                <span class="diggnum">0</span>
            </div>
            <div class="clear">
            </div>
            <div class="digg_tip">
            </div>
        </div>
        <div class="post_item_body">
            <h3>
                <a href="@blogInfo.LinkUrl" target="_blank" class="titlelink">@blogInfo.Title</a>
            </h3>
            <p class="post_iteme_summary">
                @blogInfo.BlogContent ...
            </p>
            <div class="post_item_foot">
                <a class="lightblue" href="@blogInfo.LinkUrl">@blogInfo.AuthorID</a>
                @blogInfo.PublishTime.ToString()
                <span class="article_comment"><a class="gray" title="">評論(0)</a> </span><span class="article_view">
                    <a class="gray">閱讀(1)</a> </span>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
    }
    
    @Html.AjaxPager(Model, new PagerOptions()
       {
           PageIndexParameterName = "id",
           ShowDisabledPagerItems = false,
           ShowPageIndexBox = true
       },
    new AjaxOptions() { UpdateTargetId = "post_list", OnBegin = "function(){alert('Ajax OnBegin 事件被引發');}", OnComplete = "AjaxStop" })
}

5.Html.AjaxPager()方法就是MvcPager的一個擴展方法，擴展了HtmlHelper。對於其中的幾個參數我就不介紹了，也很容易理解。

6.有圖有證據 下面我來展示一下我的系統分頁顯示

 

3.使用MVCPager進行分頁顯示，更詳細的教程信息還是在官網，里面有這個控件可以實現的各種方法。我在這里只是介紹了一下我的分頁設計

順便說一句，我們程序員最忌諱的就是手高眼低，只有我們親手敲進去了以后，才能知道會遇到什么問題？千萬不要眼高手低！

索引：

使用正則表達式抓取博客園列表數據 (2012-12-15 22:16)
Lucene.net 原理介紹以及使用方法 (2012-12-13 23:49)
Asp.net MVC 使用Autofac的簡單使用 IOC (2012-12-12 13:16)
Asp.net MVC 仿照博客園的簡單網站首頁 列表設計 (2012-12-11 22:21)
為什么要從Web form過渡到MVC中 (2012-12-09 22:43)
Asp.net MVC3 企業網站系統高仿博客園 首頁左側列表頁面 實現效果 (2012-12-08 19:11)
Asp.net MVC 3 開發企業網站系統仿照博客園部分功能--總體設計 (2012-12-05 23:41)
Asp.net MVC 3 開發簡單的企業系統開篇--數據庫 (2012-12-03 21:03)
Asp.net MVC 3 開發一個簡單的企業網站系統 (2012-12-02 21:09)