ASP.NET MVC快速分頁的實現

對于Web應用，展示List是很常見的需求，隨之而來的常見的分頁組件。jQuery有現成的分頁組件，網上也有著大量的第三方分頁組件，都能夠快速實現分頁功能。但是今天我描述的是用基本的C#和html代碼實現的分頁，不借助任何第三方組件。

實現思路

這里的實現主要借助ViewModel和HtmlHelper實現，通過傳遞分頁參數PagingInfo來實現。

創建分頁參數類PagingInfo.cs

using System;

namespace CWHomeWebSite.Models
{
    public class PagingInfo
    {
        //項目總數量
        public int TotalItems { get; set; }
        //當前索引
        public int PageIndex { get; set; }
        //分頁大小
        public int PageSize { get; set; }
        //頁數
        public int PageCount
        {
            get
            {
                return (int)Math.Ceiling((decimal)TotalItems / PageSize);
            }
        }
    }
}</pre> 
 
創建視圖對應的ViewModel

using CWHomeWebSite.Data.Entities;
using System.Collections.Generic;

namespace CWHomeWebSite.Models
{
    public class PostViewModel
    {
        //博客集合
        public IEnumerable<Post> Posts { get; set; }
        //分頁參數
        public PagingInfo PagingInfo { get; set; }
    }
}</pre> 
 
處理Controller視圖方法

這里我們視圖對應的方法是Index，其中分頁參數設定了默認值，這樣即使不傳遞也會默認分頁。this.repository是注入的DBContext對象，提供數據源。
public ActionResult Index(int pageIndex = 1, int pageSize = 2)
        {
            //獲取當前分頁數據集合
            var posts = this.repository.Posts
　　　　　　　　　 .OrderBy(p=>p.UpdateTime)　
                .Skip((pageIndex - 1) * pageSize)
                .Take(pageSize);


        //將當前ViewModel傳遞給視圖
        return View(new PostViewModel
        {
            Posts = posts,
            PagingInfo = new PagingInfo
            {
                TotalItems = this.repository.Posts.Count(),
                PageIndex = pageIndex,
                PageSize = pageSize
            }
        });
    }</pre> 

在View中通過Html輔助器擴展方法處理PagingInfo
利用上一篇文章講述的擴展方法，為Html輔助器定義一個擴展方法用于生成分頁html代碼，實現如下：
using CWHomeWebSite.Models;
using System;
using System.Web.Mvc;

namespace CWHomeWebSite.Helper
{
    public static class PagingHelper
    {
        //HtmlHelper擴展方法，用于分頁
        public static MvcHtmlString Pagination(this HtmlHelper html, PagingInfo pageInfo,Func<PagingInfo,string> pageLinks)
        {
            var htmlString = pageLinks(pageInfo);

        return MvcHtmlString.Create(htmlString);
    }
}

}</pre> 
 
在視圖中調用此擴展方法，處理邏輯通過Lamda表達式引用，這樣可以修改View視圖來調整并使用Url.Action來生成Url，而不用重新編譯cs文件。完整的視圖文件如下：

@model CWHomeWebSite.Models.PostViewModel
@using CWHomeWebSite.Helper

@{
    ViewBag.Title = "主頁";
}
<!-- 博客列表 -->
<section id="one">
    <ul class="actions">
        @foreach (var post in Model.Posts)
        {
            <li>
                <header class="major">
                    <h2>
                        @post.Title <br />
                        | @post.CreateTime.ToShortDateString()
                    </h2>

                <p>@post.Description</p>
                <ul class="actions">
                    <li>@Html.ActionLink("更多", "Detail", "Home", new { @post.PostId }, new { @class = "button" })</li>
                </ul>
            </header>
            <hr />
        </li>
    }

</ul>

<!--分頁代碼-->
@Html.Pagination(Model.PagingInfo, (info) =>

{
       var pagingString = "<ul class=\"actions small\">";
       for (var i = 1; i <= info.PageCount; i++)
       {
           if (i == info.PageIndex)
           {
               pagingString += "<li><a class=\"special\" href=\"#\">" + i + "</a></li>";
           }
           else
               pagingString += "<li><a class=\"normal\" href=\"" + Url.Action("Index", new { pageIndex = i, pageSize = info.PageSize }) + "\">" + i + "</a></li>";
       }
       pagingString += "</ul>";
       return pagingString;
   })
</section>
<!--最近作品-->
@Html.Action("RecentWorks", "Work")</pre> 
 
這樣就可以輕松實現一個快速分頁組件啦，我們運行一下，查看效果：

  
最后點擊各頁面索引，發現均實現預定目標，到此一個快速分頁組件就實現啦。 
 </div>