ASP.NET MVC5 PagedList分頁示例

ASP.NET MVC是目前ASP.NET開發(fā)當(dāng)中輕量級的Web開發(fā)解決方案，在ASP.NET MVC概述這篇譯文當(dāng)中，已經(jīng)詳細(xì)的介紹了ASP.NET MVC與Web Forms的區(qū)別以及各自的適用場景。由于ASP.NET MVC尤其適合網(wǎng)站的開發(fā)（Web Forms更適合業(yè)務(wù)系統(tǒng)的開發(fā)），目前成為很多網(wǎng)站開發(fā)者的首先框架。

這里舉個(gè)典型的例子（表格的分頁），以此熟悉一下ASP.NET MVC的開發(fā)。開發(fā)環(huán)境：Windows 8.1企業(yè)版+VS2013旗艦版+SQL Server 2014。

首先利用VS2013的向?qū)?，?chuàng)建一個(gè)ASP.NET MVC5的應(yīng)用程序。

這個(gè)應(yīng)用程序是可以直接運(yùn)行的，提供了一些默認(rèn)的功能（注冊、登錄）以及各自的實(shí)現(xiàn)示例代碼，基本上開發(fā)者參考著這些代碼就能簡單開發(fā)了。這里順便說一句，VS2013非常人性化，為開發(fā)者考慮了很多。

一、修改數(shù)據(jù)庫配置

由于這是默認(rèn)創(chuàng)建的ASP.NET MVC應(yīng)用程序，便于我們開發(fā)，我們最好修改一下數(shù)據(jù)庫配置。打開項(xiàng)目根目錄下的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>

由于我們要開發(fā)一個(gè)分頁Demo，順便在appSettings配置節(jié)點(diǎn)下，添加：

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

二、創(chuàng)建Model

一般我們開發(fā)MVC應(yīng)用，都是從Model開始。我們在項(xiàng)目的Models文件夾下面新建一個(gè)學(xué)生模型類。

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; }
    }
}

三、創(chuàng)建數(shù)據(jù)操作類

我們先在項(xiàng)目的根目錄下，新建一個(gè)DAL目錄。然后在DAL目錄下，新建一個(gè)StudentContext類，并讓它繼承自DbContext。我們這個(gè)例子使用EF來實(shí)現(xiàn)數(shù)據(jù)庫的操作。

由于創(chuàng)建的MVC5應(yīng)用，已經(jīng)默認(rèn)引入了EF6.0，可以不用通過管理NuGet程序包來在線安裝EF。

StudentContext代碼如下：

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

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

    }
}

我們還需要使用到PagedList來進(jìn)行分頁，因此需要在線安裝。我們可以通過程序包管理器控制臺(tái)輸入命令的方式進(jìn)行安裝。

這樣我們所需要的dll就自動(dòng)添加到了項(xiàng)目當(dāng)中。

四、創(chuàng)建Controller

MVC開發(fā)中有個(gè)規(guī)則叫做：約定大于配置。即：在創(chuàng)建Controller的時(shí)候，類名統(tǒng)一以Controller結(jié)尾，所以我們創(chuàng)建一個(gè)StudentController的控制器。

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

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

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

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

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

            //通過ToPagedList擴(kuò)展方法進(jìn)行分頁
            IPagedList<Student> pagedList = students.ToPagedList(pageNumber, pageSize);

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

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

using PagedList;

五、創(chuàng)建View

我們在StudentController控制器中的Index方法旁，鼠標(biāo)右鍵-添加視圖，選擇相應(yīng)的選項(xiàng)（此前先編譯一下項(xiàng)目，否則可能無法正常添加視圖）。

將新建的~/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>
            分?jǐn)?shù)
        </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 頁，當(dāng)前第 @Model.PageNumber 頁
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }))

六、準(zhǔn)備測試數(shù)據(jù)

在項(xiàng)目的根目錄下新建Initializer目錄，然后在里面新建一個(gè)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節(jié)點(diǎn)下添加如下配置：

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

MVC5PageDemo.DAL.StudentContext是命名空間名+類名，逗號(hào)后面的MVC5PageDemo是StudentContext類所在的dll文件的名稱。context節(jié)點(diǎn)下的databaseInitializer的配置同理。

如上就完成了基于ASP.NET MVC5分頁表格的開發(fā)。

最終的效果圖：