【隨筆系列】Asp.Net Mvc分頁控件PagedList的使用方法及配置

　　　　企業在做Asp.Net Mvc開發過程中，很多時候都是一些CRUD，最基本的就是一個列表頁面，然后附帶一些功能按鈕。如果有數據列表，大多數就會涉及到對數據進行分頁，這次就介紹一下Mvc PagedList控件分頁的使用方法。Github PagedList鏈接 。

下面我通過新建Mvc項目來展示PagedList的使用方法。

 

一、新建BookLibrary解決方案

確定后，選擇MVC

 

然后點擊確定。

 

二、添加PagedList與PagedList.Mvc的程序包。

選擇BookLibrary項目，鼠標右鍵選擇“管理NuGet程序包”,在瀏覽框中輸入PagedList.Mvc，選擇最新穩定版，我這里選擇4.5.0版本，點擊安裝，然后他會提示有依賴項

點擊確定，他會自動安裝PagedList與PagedList.Mvc程序包。同時看一下項目的Content文件夾，它會自動添加PagedList.css文件，這個是分頁控件的樣式表。

 

三、創建模型與上下文

1、創建Book模型類。

using System;

namespace BookLibrary.Models
{
    public class Book
    {
        private Guid _Id;        

        public Guid Id
        {
            get { return _Id; }
            set { _Id = value; }
        }

        private string _BookName;

        public string BookName
        {
            get { return _BookName; }
            set { _BookName = value; }
        }

        private decimal _Price;

        public decimal Price
        {
            get { return _Price; }
            set { _Price = value; }
        }

        private string _Author;

        public string Author
        {
            get { return _Author; }
            set { _Author = value; }
        }

        private int _Sort;

        public int Sort
        {
            get { return _Sort; }
            set { _Sort = value; }
        }

    }
}

2、通過管理NuGet程序包，添加EntityFramework程序包。

 

3、Web.config添加數據庫鏈接字符串

  <connectionStrings>
    <add name="BookConnection" connectionString="DataBase=|DataDirectory|\Book.mdf;Data Source=.;Initial Catalog=Book;UID=sa;PWD=123qwe;Integrated Security=True" providerName="System.Data.SqlClient"/>
  </connectionStrings>

4、創建BookContext上下文類

using System.Data.Entity;

namespace BookLibrary.Models
{
    public class BookContext : DbContext
    {
        public BookContext() : base("BookConnection") { }
        public DbSet<Book> Books { get; set; }
    }
}

 

四、創建數據庫初始化策略

在項目下新建DBInitializer文件夾，並新建BookInitializer類，使用數據庫初始化策略

CreateDatabaseIfNotExists<BookContext>，在Seed中添加一些數據

using System;
using System.Collections.Generic;
using System.Data.Entity;
using BookLibrary.Models;

namespace BookLibrary.DBInitializer
{
    public class BookInitializer:CreateDatabaseIfNotExists<BookContext>
    {
        protected override void Seed(BookContext context)
        {
            var bookList = new List<Book>();
            for (int i = 0; i < 15; i++)
            {
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "你的善良必須有點鋒芒",
                    Author = "慕顏歌", 
                    Price = 50,
                    Sort=i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "月亮與六便士",
                    Author = "威廉.薩穆塞特.毛姆", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "將來的你，一定會感謝現在拼命的自己",
                    Author = "湯木", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "你只是看起來很努力",
                    Author = "李尚龍", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "人性的弱點",
                    Author = "戴爾.卡耐基", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "在痛苦的世界盡力而為",
                    Author = "俞敏洪", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "做最好的自己",
                    Author = "李開復", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "白夜行",
                    Author = "東野圭吾", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "活着",
                    Author = "余華", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "拆掉思維里的牆",
                    Author = "古典", 
                    Price = 50,
                    Sort = i
                });
                bookList.Add(new Book
                {
                    Id = Guid.NewGuid(),
                    BookName = "巨流河",
                    Author = "齊邦媛", 
                    Price = 50,
                    Sort = i
                });
            }
            context.Books.AddRange(bookList);
            base.Seed(context);
        }
    }
}

在Web.config文件中entityFramework節點下添加如下配置

  <contexts>
      <context type="BookLibrary.Models.BookContext,BookLibrary">
        <databaseInitializer type="BookLibrary.DBInitializer.BookInitializer,BookLibrary"></databaseInitializer>
      </context>
    </contexts>

 

五、創建控制器與視圖

新建BookController控制器

using PagedList;
using System.Configuration;
using System.Linq;
using System.Web.Mvc;
using BookLibrary.Models;

namespace BookLibrary.Controllers
{
    public class BookController : Controller
    {
        /// <summary>
        /// 數據庫上下文
        /// </summary>
        private BookContext db;
        public BookController()
        {
            db = new BookContext();
        }

        // GET: Book
        public ActionResult Index(int? page)
        {
            ///書籍列表
            var books = db.Books.OrderByDescending(p => p.Sort);


            ///page為null時默認設置為1
            var pageNumber = page ?? 1;

            ///每頁顯示項目數量
            var pageSize = 10;
            if (ConfigurationManager.AppSettings["PageSize"] != null)
            {
                int.TryParse(ConfigurationManager.AppSettings["PageSize"], out pageSize);
            }


            ///進行分頁生成model
            IPagedList<Book> model = books.ToPagedList(pageNumber, pageSize);

            return View(model);
        }
    }
}

創建視圖

@model PagedList.IPagedList<BookLibrary.Models.Book>
@using PagedList.Mvc;
@{
    ViewBag.Title = "書籍列表";
}
<link href="~/Content/PagedList.css" rel=" stylesheet" />
<h2>@ViewBag.Title</h2>
<style>
    .highLight {
    }

        .highLight > a {
            background-color: #dc6969 !important;
            color: #ffffff !important;
            font-weight: 500;
            font-family: '黑體';
            /*font-size:15px;*/
        }
</style>
<table class="table">
    <thead>
        <tr>
            <th>
                書名
            </th>
            <th>
                作者
            </th>
            <th>
                價格
            </th>
        </tr>
    </thead>
    <tbody>
        @if (Model != null && Model.Count > 0)
        {
            foreach (var book in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(p => book.BookName)</td>
                    <td>@Html.DisplayFor(p => book.Author)</td>
                    <td>@Html.DisplayFor(p => book.Price)元</td>
                </tr>
            }

        }
        else
        {
            <tr><td colspan="3">---</td></tr>
        }

    </tbody>
</table>
@Html.PagedListPager(Model, page => Url.Action("Index", "Book", new { page = page }), new PagedListRenderOptions
{
    DisplayItemSliceAndTotal = true,
    Display = PagedListDisplayMode.IfNeeded,
    ItemSliceAndTotalFormat = "顯示{0}頁到{1}頁,共{2}條",
    //LinkToNextPageFormat = "»",
    LinkToNextPageFormat = ">>",
    LinkToLastPageFormat = "Last",
    DisplayLinkToLastPage = PagedListDisplayMode.Always,
    LinkToFirstPageFormat = "First",
    DisplayLinkToFirstPage = PagedListDisplayMode.Always,
    LinkToPreviousPageFormat = "<<",
    // LinkToPreviousPageFormat = "«",
    DisplayEllipsesWhenNotShowingAllPageNumbers = true,
    DisplayPageCountAndCurrentLocation = true,
    PageCountAndCurrentLocationFormat = "當前第{0}頁,共{1}頁",
    ClassToApplyToLastListItemInPager = "highLight",
    ClassToApplyToFirstListItemInPager = "highLight",
    LiElementClasses = new List<string> { "highLight" }

})

最終的項目結構如下

然后運行項目，輸入控制器名字/Book，最終效果如下

如果自己要更改分頁樣式的話，可以看一下PagedListRenderOptions這個類，配置還是很靈活的。

 

六、無刷新分頁

上面的分頁是刷新分頁，那這個插件有沒有更厲害一點的呢，實現無刷新分頁呢，下面我們來看一下這個類PagedListRenderOptions的介紹

很幸運，這個類PagedListRenderOptions有三個靜態方法，我們從靜態方法名字上可以大概讀出的意思是“啟用不引人注目的Ajax替換”請忽略我的翻譯，哈哈，其實大概意思就是無刷新的方式，下面我們就使用這個來實現無刷新的分頁。

1、首先看一下你的項目文件夾Scripts目錄下是否含有”jquery.unobtrusive-ajax.js“這個腳本

因為無刷新分頁需要用到這個腳本，如果沒有可以通過 管理NuGet程序包/程序包管理控制台 的形式進行添加，在瀏覽框中輸入

”Microsoft.Jquery.Unobtrusive.Ajax“

然后點擊安裝，我這里已經安裝完成。

2、在BookController中添加一個名字為Info的ActionResult，代碼內容如下

public ActionResult Info(int? page, bool jqueryUnobtrusive = false)
        {
            ///書籍列表
            var books = db.Books.OrderByDescending(p => p.Sort);

            ///page為null時默認設置為1
            var pageNumber = page ?? 1;

            ///每頁顯示項目數量
            var pageSize = 10;
            if (ConfigurationManager.AppSettings["PageSize"] != null)
            {
                int.TryParse(ConfigurationManager.AppSettings["PageSize"], out pageSize);
            } 

            ///進行分頁生成model
            IPagedList<Book> model = books.ToPagedList(pageNumber, pageSize);

            ViewBag.jqueryUnobtrusive = jqueryUnobtrusive;
            return View(model);
        }

 

3、然后創建視圖Info.cshtml，代碼內容如下

@model PagedList.IPagedList<BookLibrary.Models.Book>
@using PagedList.Mvc;
@{
    if (ViewBag.jqueryUnobtrusive == true)
    {
        Layout = null;
    }
    ViewBag.Title = "書籍列表";
}
@section scripts{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
} 
<div id="bookListAjax">
    <link href="~/Content/PagedList.css" rel=" stylesheet" />
    <style>
        .highLight {
        }

            .highLight > a {
                background-color: #dc6969 !important;
                color: #ffffff !important;
                font-weight: 500;
                font-family: '黑體';
                /*font-size:15px;*/
            }
    </style>
    <h2>@ViewBag.Title</h2>
    <table class="table">
        <thead>
            <tr>
                <th>
                    書名
                </th>
                <th>
                    作者
                </th>
                <th>
                    價格
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null && Model.Count > 0)
            {
                foreach (var book in Model)
                {
                    <tr>
                        <td>@Html.DisplayFor(p => book.BookName)</td>
                        <td>@Html.DisplayFor(p => book.Author)</td>
                        <td>@Html.DisplayFor(p => book.Price)元</td>
                    </tr>
                }

            }
            else
            {
                <tr><td colspan="3">---</td></tr>
            }

        </tbody>
    </table>
    @Html.PagedListPager(Model, page => Url.Action("Info", "Book", new { page = page, jqueryUnobtrusive = true }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions
    {
        DisplayItemSliceAndTotal = true,
        Display = PagedListDisplayMode.IfNeeded,
        ItemSliceAndTotalFormat = "顯示{0}頁到{1}頁,共{2}條",
        //LinkToNextPageFormat = "»",
        LinkToNextPageFormat = ">>",
        LinkToLastPageFormat = "Last",
        DisplayLinkToLastPage = PagedListDisplayMode.Always,
        LinkToFirstPageFormat = "First",
        DisplayLinkToFirstPage = PagedListDisplayMode.Always,
        LinkToPreviousPageFormat = "<<",
        // LinkToPreviousPageFormat = "«",
        DisplayEllipsesWhenNotShowingAllPageNumbers = true,
        DisplayPageCountAndCurrentLocation = true,
        PageCountAndCurrentLocationFormat = "當前第{0}頁,共{1}頁",
        ClassToApplyToLastListItemInPager = "highLight",
        ClassToApplyToFirstListItemInPager = "highLight",
        LiElementClasses = new List<string> { "highLight" }
    }, new AjaxOptions
    {
        AllowCache = false,
        UpdateTargetId = "bookListAjax",
        HttpMethod = "Post"
    }))
</div>

需要注意的地方

1、BookController控制器的Info方法，添加一個默認參數jqueryUnobtrusive=false用來區別是第一次加載還是通過Ajax的方式訪問

2、Info.cshtml中通過ViewBag.jqueryUnobtrusive來判斷是否使用Layout模板

3、使用@section scripts方式添加jquery.unobtrusive-ajax.js腳本

最后看一下效果圖