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非常人性化,为开发者考虑了很多。

一、修改数据库配置

由于这是默认创建的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"/>

二、创建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; }
    }
}

二、创建数据操作类

我们先在项目的根目录下,新建一个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就自动添加到了项目当中。

三、创建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;

四、创建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 }))

五、准备测试数据

在项目的根目录下新建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分页表格的开发。

最终的效果图:

时间: 2024-12-24 22:39:19

ASP.NET MVC5 PagedList分页的相关文章

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. 首

ASP.NET MVC利用PagedList分页(一)

前几天看见博客园上有人写ASP.NET MVC的分页思想,这让我不禁想起了PagedList.PagedList是NuGet上提供的一个分页的类库,能对任何IEnumerable<T>进行分页,而且非常简单好用.从NuGet上,可以获取两个DLL:PagedList.dll和PagedList.Mvc.dll.PagedList.dll提供分页的核心操作,PagedList.Mvc.dll是一个辅助类库,在创建分页的UI时候提供简单.可扩展的创建方法.不过PagedList.dll可以用于MV

ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender

(原文) 昨天在ASP.NET MVC利用PagedList分页(一)的 最后一节提到,一个好的用户体验绝对不可能是点击下一页后刷新页面,所以今天来说说利用Ajax+PagedList实现无刷新(个人绝对局部刷新更准确 些)的分页.其实在PagedList.Mvc中早已经为我们提供好了Ajax分页的各种东东,但是这里我要自己写下. 实现思想: 1.客户端发送Ajax请求.2.服务器端响应请求并将响应结果回传给客户端.3.客户端接收响应结果并进行数据绑定. 实现方案: 大多数人都知道这个思想,但是

一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十一)

前言 小伙伴们,大家好,我是Rector.最近Rector忙于换工作,没有太多时间来更新我们的ASP.NET MVC 5系列文章 [一步一步创建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar],直到现在才挤些时间赶紧更新一篇,小伙伴们等得太久了. 写系列文章是一件并不容易的事情,相信有过写系列文章经验朋友也应该有所体会. 本文知识要点 本期是该系列的第十一篇,上一篇<一步一步创建ASP.NET MVC5程序[Repository+Auto

构建ASP.NET MVC5+EF6+EasyUI 1.5+Unity4.x注入的后台管理系统(1)-前言与目录(持续更新中...)

前言: 起初写这个框架的时候,可以说在当时来说并不是很流行的设计模式,那是在2012年,面向对象的编程大家都很熟悉, 但是“注入.控制反转(DI,IOC,依赖注入).AOP切面编程”新兴名词 很多人并不知道特别是从事.NET开发的人,至少在当时 是这么样的,但是在今天它们却是非常流行的技术指标,很多大牛也承认,这是主流的开发模式,你们可以从招聘网的技术岗位看出. 我从事过MVC2.0到5.0的相关开发工作,见证了MVC的成熟演变过程,就像本框架一样,设计模式未曾改变,但是代码一直在重 构.我也坚

ASP.NET MVC5微信公众平台整合开发实战教程

<ASP.NET MVC5&微信公众平台整合开发实战(响应式布局.JQuery Mobile,Windows Azure.微信核心开发)> 课程讲师:57Code 课程分类:ASP.NET MVC 适合人群:中级 课时数量:29课时 用到技术:深入MVC开发模式.C#核心语言特性.C#核心语言特性(二).视图引擎Razor 涉及项目:体育商店.微信公众平台开发 咨询QQ:1337192913(小公子) 1.1.1.背景分析 庞大的微信用户数是微信公众平台重要性的根本 微信用户的真实性使

ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-前言与目录(持续更新中...)

开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 日程管理   http://www.cnblogs.com/ymnets/p/7094914.html 任务调度系统界面 http://www.cnblogs.com/ymnets/p/5065154.html 系统权限全套完整图  http://www.cnblogs.com/ymnets/p/5065201.html 系统

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(1)-前言与目录(持续更新中...)

开篇:从50开始系统已经由MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4.3. 从50节起为MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4.3.的特性文章 所以你们也要更新你们的环境 功能不变属于无缝接入,最大改变只在UI,初学同学,直接使用MVC5 开发工具:VS2013+SQL2012 相关代码:演示地址暂时关闭   第2讲源码下载 

ASP.NET MVC5.0+Entity Framework(EF)6.1系列教程

ASP.NET MVC5.0+Entity Framework(EF)6.1系列教程 从webform+ado.net开发模式转换到asp.net mvc+ef开发模式已经有一年多时间了.一直希望能够将自己开发中的一点微薄经验写下啦,现在列个目录,鼓励自己写下去. 1.1 Entity Framework(EF) ASP.NET MVC+Entity Framework(EF)技术介绍 ASP.NET MVC+Entity Framework(EF)项目搭建 3种Entity Framework