ASP.NET MVC分页的实现方法

发布时间 - 2026-01-11 00:11:31    点击率:

在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法。分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页。在今天这篇文章中,我们学习如果在MVC页面中使用PagedList.Mvc包来实现分页功能。

1) 安装PagedList.Mvc

首先,我们需要安装分页组件包,在Visual Studio 2010中点击【项目】-【管理NuGet程序包】,打开NuGet包管理器窗体,在该窗体中,选择“联机”标签,然后搜索pagedlist,如下图所示。点击“安装”按钮安装PagedList.Mvc的最新版本(目前最新版本为4.5.0)。

在把PagedList.Mvc安装完成之后,PagedList包也被安装上了。如下图。

图1:NuGet包管理器中显示的PagedList.Mvc

2) 实现带分页功能的视图实体对象和控制器

把PagedList.Mvc安装完成之后,第一件事就是增加一个视图实体对象,用来放置一些查询属性与查询结果。在Models目录下新增一个ViewBook.cs文件,代码如下列所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using PagedList;
 
namespace MvcApplication1.Models
{
 public class ViewBook
 {

   public IPagedList<Book> Books { get; set; }
   public string Search { get; set; }  

   public string Category { get; set; }
   public string SortBy { get; set; }  
 }
}

  我们现在需要修改BookController类的SearchIndex方法,以便Books作为PagedList返回(使用ToPagedList()方法完成)。为了使用PagedList,我们还需要设置默认排序。为了使用PagedList包,我们首先需要在该文件的顶部添加using PagedList;代码,然后修改Controllers\BookController.cs文件为下列粗体显示的代码。

public ActionResult SearchIndex(string Category, string searchString, string sortBy,int? page)
 
 {

   var cateLst = new List<string>();

   var cateQry = from d in db.Books
       orderby d.Category
       select d.Category;
   cateLst.AddRange(cateQry.Distinct());
   ViewBag.category = new SelectList(cateLst); 

   //排序选项
    var orderbyLst = new Dictionary<string, string>
  {
   { "价格从低到高", "price_lowest" },
   { "价格从高到低", "price_highest" }
  };

    ViewBag.sortBy = new SelectList(orderbyLst, "Value", "Key");
   // [2017-2-14 end]
   var books = from m in db.Books
      select m; 

   if (!String.IsNullOrEmpty(searchString))
   {
    books = books.Where(s => s.Name.Contains(searchString));
   }

   // sort the results
   switch (sortBy)
   {

    case "price_lowest":
     books = books.OrderBy(p => p.Price);
     break;
    case "price_highest":
     books = books.OrderByDescending(p => p.Price);
     break;
    default:
     books = books.OrderBy(p => p.Name);
     break;
   } 

   //分页
   const int pageItems = 5;
  int currentPage = (page ?? 1);
  IPagedList<Book> pageBooks = books.ToPagedList(currentPage, pageItems);
  // [2017-2-14]
  ViewBook vbook = new ViewBook();
  vbook.Books = pageBooks;
  vbook.Category = Category;
  vbook.SortBy = sortBy;
  vbook.Search = searchString;
   if (string.IsNullOrEmpty(Category))
     vbook.Books =pageBooks;
   else
   {
    vbook.Books =pageBooks.Where(x => x.Category == Category).ToPagedList(currentPage, pageItems);
   }
   return View(vbook);
  }

  以上代码进行了以下几次发动,第一处改动是添加了一个int? page参数,它是一个可空整型,表示用户在书籍查询页面中选择的当前页码。当第一次加载书籍查询页面时,用户还没有选择任何页码,因此,这个参数可以为null。

  我们必须确保当前的分类也要保存在视图实体对象中,因此,我们添加了vbook.Category = Category;这行代码。

  代码books = books.OrderBy(p => p.Name);用于对产品列表进行默认排序,这是因为PagedList要求列表必须是一个有序列表。

  接着,我们使用代码const int pageItems = 5;来指定每页显示的数据数量。然后,我们声明了一个整型变量int currentPage = (page ?? 1);来保存当前页码,该变量的值是page参数的值,或者是1(当page变量为null时)。

  我们使用代码vbook.Books = books.ToPagedList(currentPage, PageItems);,对产品信息调用了ToPagedList方法,并将当前页和每页显示的条目数传递给了ToPagedList方法,然后将该方法的返回值赋值给了视图实体对象的Books属性。

  我们使用代码viewBook.SortBy = sortBy;将sortBy参数的值保存到视图实体对象的SortBy属性中,以便我们从一页移动到另一页时,产品的排序保持不变。

3) 带分页功能的查询页面

   在视图实体对象和控制器中对实现分页功能的代码进行修改之后,现在,我们需要更新视图文件\Views\Products\SearchIndex.cshtml,在这个视图文件中显示一个分页控件,以便用户可以在各页之间移动。我们同时也添加了有多少条数据的指示信息。为了完成这些功能,我们在该文件中添加了一个using语句,一个书籍总数的指示信息以及在该页底部显示一个分页控件,具体代码如下面显示:

@model MvcApplication1.Models.ViewBook
 @using PagedList.Mvc

@{

 ViewBag.Title = "书籍查询";
}
 <link href="/Content/PagedList.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />
<h2>书籍查询</h2>
  @using (Html.BeginForm("SearchIndex","book",FormMethod.Get)){ 
   <p>书籍种类: @Html.DropDownList("category", "All") 
   书籍名称: @Html.TextBox("SearchString") 
    排序: @Html.DropDownList("sortBy", "不排序")
   <input type="submit" value="查询" /> </p>
  }

<table>
 <tr>
  <th>
   @Html.DisplayNameFor(model => model.Books.First().Category)
  </th>
  <th>
   @Html.DisplayNameFor(model => model.Books.First().Name)

  </th>
  <th>
   @Html.DisplayNameFor(model => model.Books.First().Numberofcopies)

  </th>
  <th>
   @Html.DisplayNameFor(model => model.Books.First().AuthorID)

  </th>
  <th>
   @Html.DisplayNameFor(model => model.Books.First().Price)

  </th>
  <th>
   @Html.DisplayNameFor(model => model.Books.First().PublishDate)

  </th>
  <th></th>

 </tr>
@foreach (var item in Model.Books) {

 <tr>
  <td>
   @Html.DisplayFor(modelItem => item.Category)

  </td>
  <td>
   @Html.DisplayFor(modelItem => item.Name)

  </td>
  <td>
   @Html.DisplayFor(modelItem => item.Numberofcopies)

  </td>
  <td>
   @Html.DisplayFor(modelItem => item.AuthorID)

  </td>
  <td>
   @Html.DisplayFor(modelItem => item.Price)

  </td>
  <td>
   @Html.DisplayFor(modelItem => item.PublishDate)

  </td>
  <td>
   @Html.ActionLink("Edit", "Edit", new { id=item.BookID }) |

   @Html.ActionLink("Details", "Details", new { id=item.BookID }) |

   @Html.ActionLink("Delete", "Delete", new { id=item.BookID })

  </td>
 </tr>
}
</table>

<div>
  Page @(Model.Books.PageCount < Model.Books.PageNumber ? 0 : Model.Books.PageNumber) of @Model.Books.PageCount

  @Html.PagedListPager(Model.Books, page => Url.Action("SearchIndex", new { category = Model.Category, 
search = Model.Search, sortBy = Model.SortBy, page }))
 </div>

分页链接生成代码包裹在div标签内。其中第一行代码使用?:操作符的第一行代码决定是否有任何页码显示,它显示“Page 0 of 0”或者“Page x of y”,x表示当前页码,y表示总页数。

第二行代码使用来自于PagedList.Mvc命名空间的PagedListPager辅助器。该辅助器接收一个产品列表参数,并为每个页面生成一个超链接。Url.Action用于生成一个含有当前页参数超链接目标。我们将一个匿名类型(含有当前分类、搜索条件、排序信息和分页)传递给该辅助器方法,以便每个页面的链接中都包含一个查询字符串,这个查询字符串包含有当前分类、搜索条件、排序信息和分页信息。这意味着,当从一个页面移动到另一个页面时,搜索条件、选择的分类和排序规则都被保存下来。如果没有这样做,书籍列表将会被重置为显示所有书籍信息。

在使用了上述代码后,按“价格从低到高”排序分页界面,如下图1。

图1

    我们发现分页的数字部分,并不好看,原来我们缺少引用了CSS,在查询页面的标题下方添加如下代码。在上述代码中的蓝色字体。

<link href="/Content/PagedList.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />

再次点击“查询”按钮,然后对其结果按照“价格从低到高”进行排序,效果如下图2。

图2:有搜索条件、排序和按分类过滤的分页效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# ASP.NET  # MVC  # 分页  # ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(PagedList.Mvc  # MVC+jQuery.Ajax异步实现增删改查和分页  # MVC分页之MvcPager使用详解  # ASP.NET MVC分页和排序功能实现  # ASP.NET MVC5 实现分页查询的示例代码  # ASP.NET MVC4 HtmlHelper扩展类  # 实现分页功能  # Asp.net MVC 中利用jquery datatables 实现数据分页显示功能  # ASP.NET MVC4 Razor模板简易分页效果  # ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意  # MVC使用MvcPager实现分页效果  # 如下图  # 每页  # 给了  # 所示  # 最新版本  # 该文件  # 超链接  # 是一个  # 整型  # 还没有  # 在这个  # 将会  # 在这  # 上了  # 也要  # 当前页  # 几次  # 它是  # 有多少 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  南京网站制作费用,南京远驱官方网站?  黑客入侵网站服务器的常见手法有哪些?  微信小程序 scroll-view组件实现列表页实例代码  Laravel怎么使用artisan命令缓存配置和视图  网站制作报价单模板图片,小松挖机官方网站报价?  详解CentOS6.5 安装 MySQL5.1.71的方法  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  如何在云主机上快速搭建网站?  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  简单实现jsp分页  JavaScript如何操作视频_媒体API怎么控制播放  如何快速使用云服务器搭建个人网站?  Laravel如何实现数据库事务?(DB Facade示例)  大型企业网站制作流程,做网站需要注册公司吗?  jquery插件bootstrapValidator表单验证详解  ,在苏州找工作,上哪个网站比较好?  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  JavaScript如何实现错误处理_try...catch如何捕获异常?  如何在Windows虚拟主机上快速搭建网站?  Laravel如何使用Eloquent ORM进行数据库操作?(CRUD示例)  Laravel怎么在Controller之外的地方验证数据  EditPlus中的正则表达式 实战(2)  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  企业网站制作这些问题要关注  Laravel定时任务怎么设置_Laravel Crontab调度器配置  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  济南网站建设制作公司,室内设计网站一般都有哪些功能?  如何在万网主机上快速搭建网站?  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  香港服务器租用每月最低只需15元?  北京网站制作的公司有哪些,北京白云观官方网站?  如何用好域名打造高点击率的自主建站?  nginx修改上传文件大小限制的方法  JS弹性运动实现方法分析  如何利用DOS批处理实现定时关机操作详解  如何在Tomcat中配置并部署网站项目?  如何用搬瓦工VPS快速搭建个人网站?  Laravel如何处理和验证JSON类型的数据库字段  如何在自有机房高效搭建专业网站?  laravel怎么在请求结束后执行任务(Terminable Middleware)_laravel Terminable Middleware请求结束任务执行方法  如何批量查询域名的建站时间记录?