MVC5+EF6 (附加分页功能)

我们对之前的Views à Account à Index.cshtml 进行修改以完成今天的示例。

界面样式修改前:

下面对Views à Account à Index.cshtml进行如下修改:

  1. 应用布局页 _LayoutAdmin.cshtml

2. 将HTML部分body之外的全部删掉,只留下正文内容,运行这个页面。

对样式做一些小调整,最终变成如下样式。

(调整样式的步骤略,大家可以直接查看源码)

通过Create New 新建两条测试数据,为后面分页做准备,后面每3条分一页。

目前准备工作就OK了,下面开始今天功能的操作。

详细步骤

一、标题添加链接排序功能

  1. 打开 Controllers à AccountController.cs, 修改Index方法如下

2. 打开 ViewsàAccountàIndex.cshtml, 替换标题内容。

@Html.ActionLink("UserName", "Index", new { sortOrder = ViewBag.NameSortParm })

点击标题就可以在升序倒序中切换了

二、增加名字搜索功能

继续修改Index方法,增加条件筛选功能。改动的部分见黄色背景部分。

我们添加了一个 searchString 的参数,并且添加了一个where字句用来过滤名字。

现在我们再去ViewsàAccountàIndex.cshtml 中添加一个text box用来传递这个过滤值。

现在测试一下,运行这个页面,可以看到结果符合我们的预期。

好的,下面就完成最后一个功能,分页。

三、增加分页功能(使用PagedList.MVC)

安装PagedList.MVC

打开Package Manager Console,确保Package source是nuget.org, 输入

install-package PagedList.mvc

AccountController.cs中先添加声明。

using PagedList;

修改Index方法

Index的增加如下highlight部分(我只截取了开头和结尾的部分)

我们添加了两个传入参数 currentFilter和page

页面第一次显示或没有点击页码或排序时,所有传入的值为null

当点击分页链接时,传入页码。

current sort order需要被传入,这是因为在分页时,需要保持相同顺序。

ViewBag.CurrentSort = sortOrder;

另外一个属性, ViewBag.CurrentFilter, 提供view当前的过滤字符串。

这个值用来维持分页时过滤条件不变,并且必须在分页时重新显示在text box中。如果子分页时过滤条件改变了,页面必须重设为1,因为新的过滤条件会导致显示不同的数据. 当过滤条件改变时, searchString不为null

在最后,ToPagedList将查询结果转换成分页的一个集合传递到view中。

Note

?? 操作符叫做 null-coalescing operator.

这个操作符给可为null的类型定义一个默认值。 (page ?? 1)表示如果page为null返回1,否则返回page的值。

大家直接看下面例子:

在View中增加分页的显示和功能链接

主要增加/修改 如下部分:

顶部的@model声明指定view获得一个PagedList对象。

(原来是List对象,见注释部分)

增加@using PagedList.Mvc , 获得相关分页的helper

重载BeginForm为get方式。

我们之前文章提到过,如果不涉及更新数据操作,建议用get方式。

text box 初始化为CurrentFilter.

这样当切换到下一页是可以看到当前过滤条件。

表格的标题链接也把CurrentFilter传过去。

最后再加上类似 Page x of x格式的当前页数和总共数量。

如果没有页面显示,则显示 Page 0 of 0

这种情况下,page number>page count.

根据Index方法可以得知PageNumber是1,Model.PageCount是0.

分页按钮通过PagedListPager helper来显示。

最终结果

第二页

遗留问题

最后做了个实验,发现有个问题,知道的园友帮忙解答下。

对UserName排序没问题。

我用Email排序时,如果直接把条件加到表达式中,都是OK的,如下图。

倒序排

如果按下面这种方式

不论正序还是倒序,都出现如下结果:

问题总结,下面两种写法,第二种不符合预期。

文章引自:http://www.w2bc.com/Article/11624

时间: 2024-10-21 01:42:26

MVC5+EF6 (附加分页功能)的相关文章

MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页

文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-pagedlist.html 系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 目录 前言 排序 搜索 分页 结尾 前言 上一节我们做到了如下的一个基础查询页面.本节我们向这个页面中加入排序.搜索和分页功能. 排序 从上图中的地址栏中可以看到

MVC5 Entity Framework学习之添加排序、筛选和分页功能

前一篇文章中实现了对Student 实体的的基本CRUD操作,在这篇文章中将演示如何为Students Index页面添加排序.筛选和分页的功能. 下面是当完成排序.筛选和分页功能后的截图,你可以点击列标题来进行排序. 1.为 Students Index页面添加列排序链接 要为Students Index页面添加排序功能,你需要修改Student controller的Index方法,并为Student Index视图添加代码. 向Index方法添加排序功能 打开Controllers\Stu

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

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

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 系统

[实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表

写在前面 实现逻辑是:单击图片节点,加载所有的当前用户之前上传的图片,分页,按时间倒序加载. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册 [实战]MVC5+EF6+MySql企业网盘实战(3)——验证码 [实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像 [Bootstrap]modal弹出框 [实战]MVC5+EF6+MySq

MVC5+EF6 入门完整教程十

本篇是第一阶段的完结篇. 学完这篇后,你应该可以利用MVC进行完整项目的开发了. 本篇主要讲述多表关联数据的更新,以及如何使用原生SQL. 文章提纲 多表关联数据更新 如何使用原生SQL 总结 多表关联数据更新 我们在第四篇文章已经讲过数据的更新了,不过那个是针对单表结构的更新. 这次我们讲下使用EF进行关联数据的更新. 关联数据更新有两种情况: 1.一对多 2.多对多 第一种情况关联表有主外键关联,只要简单的更新外键值就可以了(相当于更新单表),我们主要讲解第二种多对多的情况. 使用之前很熟悉

MVC5 + EF6 + Bootstrap3 (12) 新建数据

原文:MVC5 + EF6 + Bootstrap3 (12) 新建数据 Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-create.html 系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (11) 排序.搜索.分页 源码下载:点我下载 目录 前言 新建链接 新建页面Action 新建页面View 添加数据Action 查看结果 结尾

MVC5 + EF6 + Bootstrap3 (10) 数据查询页面

文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-search-page.html 上一节:MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下) 源码下载:点我下载 目录 前言 创建Model 创建数据库上下文DbContext 创建初始化数据 创建Controller 创建View 查看结果页面 查看数据库 结尾 前言 前面铺垫了那么多,今天我们就用MVC5

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(66)-MVC WebApi 用户验证 (2)

前言: 构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(65)-MVC WebApi 用户验证 (1) 回顾上一节,我们利用webapi简单的登录并进行了同域访问与跨域访问来获得Token,您可以跳转到上一节下载代码来一起动手. 继续上一篇的文章,我们接下来演示利用拿到的Token来访问接口,管理接口,利用系统权限管理接口,对每个接口进行授权(管理接口为选读部分,因为你需要阅读最开始权限管理部分(18-27节),才能阅读这部分) 开发环境: V