ASP.NET MVC5 PagedList分頁示例

ASP.NET MVC是目前ASP.Net開發當中輕量級的Web開發解決方案，在ASP.NET MVC概述這篇譯文當中，已經詳細的介紹了ASP.NET MVC與Web Forms的區別以及各自的適用場景。因爲ASP.NET MVC尤爲適合網站的開發（Web Forms更適合業務系統的開發），目前成爲不少網站開發者的首先框架。

這裏舉個典型的例子（表格的分頁），以此熟悉一下ASP.NET MVC的開發。開發環境：Windows 8.1企業版+VS2013旗艦版+SQL Server 2014。

首先利用VS2013的嚮導，建立一個ASP.NET MVC5的應用程序。

這個應用程序是能夠直接運行的，提供了一些默認的功能（註冊、登陸）以及各自的實現示例代碼，基本上開發者參考着這些代碼就能簡單開發了。這裏順便說一句，VS2013很是人性化，爲開發者考慮了不少。

1、修改數據庫配置

因爲這是默認建立的ASP.NET MVC應用程序，便於咱們開發，咱們最好修改一下數據庫配置。打開項目根目錄下的Web.config文件（注意，不是~/Views/下的Web.config）。

將DefaultConnection配置爲：

 

<connectionStrings>
    <add name="DefaultConnection" connectionString="uid=sa;pwd=123456;Data Source=192.168.0.4;
         database=|DataDirectory|\StudentDB.mdf;Initial Catalog=StudentDB;Integrated Security=True"
         providerName="System.Data.SqlClient" />
  </connectionStrings>

 

因爲咱們要開發一個分頁Demo，順便在appSettings配置節點下，添加：

 

<!-- 分頁條件：每頁顯示的記錄數-->
<add key="pageSize" value="8"/>

 

2、建立Model

通常咱們開發MVC應用，都是從Model開始。咱們在項目的Models文件夾下面新建一個學生模型類。

 

namespace MVC5PageDemo.Models
{
    public enum Sex
    {
        Female, Male
    }

    public class Student
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }

        public Sex Sex { get; set; }

        public double Score { get; set; }
    }
}

 

3、建立數據操做類

咱們先在項目的根目錄下，新建一個DAL目錄。而後在DAL目錄下，新建一個StudentContext類，並讓它繼承自DbContext。咱們這個例子使用EF來實現數據庫的操做。

因爲建立的MVC5應用，已經默認引入了EF6.0，能夠不用經過管理NuGet程序包來在線安裝EF。

StudentContext代碼以下：

 

namespace MVC5PageDemo.DAL
{
    public class StudentContext : DbContext
    {
        public StudentContext() : base("DefaultConnection") { }

        public DbSet<Student> Students { get; set; }

    }
}

 

咱們還須要使用到PagedList來進行分頁，所以須要在線安裝。咱們能夠經過程序包管理器控制檯輸入命令的方式進行安裝。

這樣咱們所須要的dll就自動添加到了項目當中。

4、建立Controller

MVC開發中有個規則叫作：約定大於配置。即：在建立Controller的時候，類名統一以Controller結尾，因此咱們建立一個StudentController的控制器。

 

namespace MVC5PageDemo.Controllers
{
    public class StudentController : Controller
    {
        //數據庫上下文操做對象
        private StudentContext db = new StudentContext();

        public ViewResult Index(int? page)
        {
            //學生列表
            var students = from s in db.Students select s;

            //第幾頁
            int pageNumber = page ?? 1;

            //每頁顯示多少條
            int pageSize = int.Parse(ConfigurationManager.AppSettings["pageSize"]);

            //根據ID排序
            students = students.OrderBy(x => x.ID);

            //經過ToPagedList擴展方法進行分頁
            IPagedList<Student> pagedList = students.ToPagedList(pageNumber, pageSize);

            //將分頁處理後的列表傳給View
            return View(pagedList);
        }
    }
}

 

如上代碼須要引入PagedList命名空間。

 

using PagedList;

 

5、建立View

咱們在StudentController控制器中的Index方法旁，鼠標右鍵-添加視圖，選擇相應的選項（此前先編譯一下項目，不然可能沒法正常添加視圖）。

將新建的~/Student/Index視圖文件修改成：

 

@model PagedList.IPagedList<MVC5PageDemo.Models.Student>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" />
<table class="table">
    <tr>
        <th>
            姓名
        </th>
        <th>
            年齡
        </th>
        <th>
            性別
        </th>
        <th>
            分數
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sex)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Score)
            </td>
        </tr>
    }
</table>

每頁 @Model.PageSize 條記錄，共 @Model.PageCount 頁，當前第 @Model.PageNumber 頁
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }))

 

6、準備測試數據

在項目的根目錄下新建Initializer目錄，而後在裏面新建一個StudentInitializer類，並繼承自System.Data.Entity.DropCreateDatabaseAlways<StudentContext>。

 

namespace MVC5PageDemo.Initializer
{
    public class StudentInitializer : System.Data.Entity.DropCreateDatabaseAlways<StudentContext>
    {
        protected override void Seed(StudentContext context)
        {
            List<Student> students = new List<Student>();
            for (int i = 1; i < 40; i++)
            {
                Student student = new Student();
                student.ID = i;
                student.Name = "張" + i;
                student.Age = 10 + i;
                student.Sex = i % 2 == 0 ? Sex.Female : Sex.Male;
                student.Score = 60 + i;

                students.Add(student);
            }

            context.Students.AddRange(students);
            context.SaveChanges();
        }
    }
}

 

在Web.config的entityFramework節點下添加以下配置：

 

<contexts>
   <context type="MVC5PageDemo.DAL.StudentContext,MVC5PageDemo">
      <databaseInitializer type="MVC5PageDemo.Initializer.StudentInitializer,MVC5PageDemo"/>
   </context>
</contexts>

 

MVC5PageDemo.DAL.StudentContext是命名空間名+類名，逗號後面的MVC5PageDemo是StudentContext類所在的dll文件的名稱。context節點下的databaseInitializer的配置同理。

 

如上就完成了基於ASP.NET MVC5分頁表格的開發。

最終的效果圖：