在本文中,我们将学习如何在MVC页面中实现分页。分页功能是一个非常实用和常用的功能。当数据过多时,必须使用分页。在今天的文章中,我们学习如何使用PagedList。Mvc包在MVC页面中实现分页功能。
1)安装页面列表。手动音量调节
首先,我们需要安装分页组件包。在Visual Studio 2010中单击“项目”-“管理NuGet包”,打开“NuGet包管理器”表单。在此表单中,选择在线选项卡和搜索页面列表,如下图所示。单击“安装”按钮安装最新版本的页面列表。Mvc(目前最新版本是4.5.0)。
安装页面列表后。Mvc,也安装了PagedList包。下图。
图1:页面列表。1:NuGet包管理器中显示的Mvc
2)实现具有分页功能的视图实体对象和控制器
安装页面列表后。Mvc中,第一件事就是添加一个视图实体对象来放置一些查询属性和查询结果。在Models目录下添加一个ViewBook.cs文件,代码如下:
使用系统;使用系统。集合。通用;使用系统。Linq使用系统。Web使用PagedList命名空间MvcApplication1。models { public class viewpook { public ipagelistbook Books { get;设置;}公共字符串Search { get设置;}公共字符串类别{ get设置;}公共字符串SortBy { get设置;}}}我们现在需要修改BookController类的SearchIndex方法,以便Books作为PagedList返回(使用ToPagedList()方法)。要使用PagedList,我们还需要设置默认排序。要使用PagedList包,我们首先需要使用文件顶部的PagedList进行添加;代码,然后将Controllers BookController.cs文件修改为以下粗体显示的代码。
public ActionResult SearchIndex(字符串类别,字符串搜索字符串,字符串排序比,int?page){ var cateLst=new Liststring();var cateQry=从d开始,单位为db。按类别排序的图书选择类别;cateLst。添加范围(类别。distinct());view bag . category=new SelectList(cateLst);//排序选项var order by lst=new dictionary string,string {{'price从低到高',' price _最低价' },{'price从高到低',' price _最高' } };视图包.排序依据=新的选择列表(排序依据列表,“值”,“键”);//[2017-2-14 end]var books=from m in db。书籍选择m;if(!字符串。IsNullOrEmpty(search string)){ books=books。其中(s=s . name . contains(search string));} //排序结果开关(sort by){ case ' price _最低价' : books=books。订单比(p=价格);打破;案例' price _最高' :本书=书籍。订单递减(p=价格);打破;default:书=书籍。order by(p=p . Name);打破;}//分页常量int page items=5;int currentPage=(页面?1);IPagedListBook pageBooks=books。ToPagedList(当前页面,页面项);//[2017-2-14]viewpook vbook=new viewpook();vbook。Books=pageBooksvbook。类别=类别;vbook。排序比=排序比;vbook。Search=searchStringif(字符串。IsNullOrEmpty(Category)) vbook。Books=pageBookselse { vbook。Books=pageBooks。其中(x=x .类别==类别)。ToPagedList(当前页面,页面项);}返回视图(vbook);}上面的代码已经启动了几次如下,第一个变化是增加了一个int?Page参数,它是一个可为空的整数,表示用户在图书查询页面中选择的当前页码。第一次加载图书查询页面时,用户没有选择任何页码,因此该参数可以为空。
我们必须确保当前分类也保存在视图实体对象中,因此我们添加了vbook。类别=类别;这行代码。
代码书=书籍。order by(p=p . Name);默认情况下用于对产品列表进行排序,因为PagedList要求列表必须是有序列表。
接着,我们使用代码const int page items=5;来指定每页显示的数据数量。然后,我们声明了一个整型变量int currentPage=(页面?1);来保存当前页码,该变量的值是页,面,张,版参数的值,或者是1(当页,面,张,版变量为空时)。
我们使用代码vbook .书籍=书籍ToPagedList(当前页面,页面项);对产品信息调用了ToPagedList方法,并将当前页和每页显示的条目数传递给了ToPagedList方法,然后将该方法的返回值赋值给了视图实体对象的书属性。
我们使用代码观影簿.排序比=排序比;将排序依据参数的值保存到视图实体对象的排序依据属性中,以便我们从一页移动到另一页时,产品的排序保持不变。
3) 带分页功能的查询页面
在视图实体对象和控制器中对实现分页功能的代码进行修改之后,现在,我们需要更新视图文件视图产品搜索索引。cshtml,在这个视图文件中显示一个分页控件,以便用户可以在各页之间移动。我们同时也添加了有多少条数据的指示信息。为了完成这些功能,我们在该文件中添加了一个使用语句,一个书籍总数的指示信息以及在该页底部显示一个分页控件,具体代码如下面显示:
@模型MVP应用1 .模特。ViewBook @使用页面列表.Mvc@{ ViewBag .Title='书籍查询;}链接href='/Content/page dlist。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表type='text/css' /h2书籍查询/H2/使用(Html .开始通知('搜索索引','图书',FormMethod .Get)){ p书籍种类:@Html .DropDownList("类别"、"全部")书籍名称:@Html .文本框('搜索字符串)排序: @Html .DropDownList('sortBy ','不排序)输入类型='提交'值='查询//p }表tr th @Html .显示名称(型号=型号.书籍。第一()。类别)th @ Html .显示名称(型号=型号.书籍。第一()。名称)/th @ Html .显示名称(型号=型号.书籍。第一()。numberofpes)/th th @ Html .显示名称(型号=型号.书籍。第一()。作者id)/th @ Html .显示名称(型号=型号.书籍。第一()。价格)th @ Html .显示名称(型号=型号.书籍。第一()。发布日期)/第/第/第/tr@foreach(模型中的定义变量项目书籍){ tr td @Html .显示(模型项目=项目.类别)/td td @Html .显示(模型项目=项目.名称)/td td @Html .显示(模型项目=项目.numberofpes)/TD TD @ Html .显示(模型项目=项目.AuthorID) /td td @Html .显示(模型项目=项目.价格)/td td @Html .显示(模型项目=项目.PublishDate) /td td @Html .操作链接('编辑','编辑',新{ id=item .BookID }) | @Html .ActionLink('Details ',' Details ',new { id=item .BookID }) | @Html .ActionLink('Delete ',' Delete ',new { id=item .BookID }) /td /tr}/tablediv Page @(模型。书籍。页数模型。书。页码?0 :型。书籍。页码)的@Model .书。PageCount @Html .寻呼机(型号。书籍,页面=Url .操作(“搜索索引”,新{类别=模型。类别,搜索=模型。搜索,排序依据=模型SortBy,page })) /div分页链接生成代码包裹在差异标签内。其中第一行代码使用?操作符的第一行代码决定是否有任何页码显示,它显示"第0页,共0页"或者"第x页,共y页“,x表示当前页码,y表示总页数。
第二行代码使用页面列表中的页面列表助手。Mvc命名空间。助手接收产品列表参数,并为每个页面生成一个超链接。Url。操作用于生成具有当前页面参数的超链接目标。我们将一个匿名类型(包含当前分类、搜索条件、排序信息和分页信息)传递给helper方法,这样每个页面链接都包含一个查询字符串,其中包含当前分类、搜索条件、排序信息和分页信息。这意味着,当您从一个页面移动到另一个页面时,搜索条件、选定的类别和排序规则将被保存。如果不这样做,图书列表将被重置以显示所有图书信息。
使用上述代码后,按照“价格从低到高”对分页界面进行排序,如下图1所示。
图1
我们发现分页的数字部分不好看。最初,我们缺少CSS引用。在查询页面的标题下添加以下代码。上面代码中的蓝色字体。
link href='/Content/page dlist . CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表' type='text/css' /
再次点击“查询”按钮,然后按照“价格从低到高”对结果进行排序。效果如下图2所示。
图2:带有搜索条件的分页效果,分类排序过滤
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。