MVC学习之数据分页：利用组件PagedList.Mvc
准备工作:
在项目的【管理NuGet程序包】中安装PagedList.Mvc组件。
安装好了截图让下：
具体实现
后台控制器代码：
using Paging.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using PagedList; //一定要引入这个命名空间 using System.Data; namespace Paging.Controllers { public class PagingController : Controller { private ComputerEntities db = new ComputerEntities(); //得到数据库上下文 /// <summary> /// 数据展示 /// </summary> /// <param name="p">当前页数</param> /// <returns>当页的数据</returns> public ActionResult Index(int p =1) { var data = db.ComputerInfo.ToList(); //得到数据源 //P:表示当前是第几页，2：表示每页展示的数据条数 var pageData = data.ToPagedList(pageNumber:p,pageSize:2); return View(pageData); } /// <summary> /// 编辑数据 /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult Edit(int id=0) { var data = db.ComputerInfo.Find(id); if (data != null) { return View(data); } else { return HttpNotFound(); } } [HttpPost] public ActionResult Edit(ComputerInfo cinfo) { if(ModelState.IsValid){ db.Entry(cinfo).State = EntityState.Modified; db.SaveChanges(); } return RedirectToAction("Index"); } /// <summary> /// 删除数据 /// </summary> /// <param name="id"></param> /// <returns></returns> [HttpPost] public ActionResult Delete(int id) { var Cinfo = db.ComputerInfo.Find(id); if (Cinfo!=null) { db.ComputerInfo.Remove(Cinfo); db.SaveChanges(); } return RedirectToAction("Index", "Paging"); } /// <summary> /// 数据详情 /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult Details(int id) { var data = db.ComputerInfo.Find(id); return View(data); } } }
前端页面：
Index：数据展示页面【涉及到分页】
@using PagedList //记得引入 @using PagedList.Mvc //记得引入 @model IEnumerable<Paging.Models.ComputerInfo> @{ ViewBag.Title = "数据展示页"; } @{ var ajaxOptions = new AjaxOptions() { OnSuccess = "OK", OnFailure = "Failure", Confirm = "您确定要删除这条信息吗？", HttpMethod="Post" }; } @section scripts{ @Scripts.Render("~/bundles/jqueryval") <script> function OK() { alert("删除成功！"); location.reload(); } function Failure() { alert("删除失败！"); } </script> } <h2>数据展示</h2> <table> <tr> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Price) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Price) </td> <td> @Html.ActionLink("编辑", "Edit", new { id=item.Id }) | @Html.ActionLink("详情", "Details", new { id=item.Id }) | @Ajax.ActionLink("删除", "Delete", new { id = item.Id }, ajaxOptions) </td> </tr> } </table>
//下面是分页涉及到的东西 <link href="~/Content/PagedList.css" rel="stylesheet" /> //样式 @{ var data = Model as IPagedList<Paging.Models.ComputerInfo>; //得到数据源 } @Html.PagedListPager(list: data, generatePageUrl: Page => Url.Action("Index", new { p=Page})) //分页链接
编辑页面：
@model Paging.Models.ComputerInfo @{ ViewBag.Title = "数据编辑页"; } <h2>编辑页面</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>@Model.Name 的编辑页面</legend> @Html.HiddenFor(model => model.Id) <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.Price) </div> <div class="editor-field"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div> <p> <input type="submit" value="保存" /> </p> </fieldset> } <div> @Html.ActionLink("首页", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
详情页面：
@model Paging.Models.ComputerInfo @{ ViewBag.Title = "数据详情页"; } <h2>详情页</h2> <fieldset> <legend>@Model.Name 的详情信息</legend> <div class="display-label"> @Html.DisplayNameFor(model => model.Name) </div> <div class="display-field"> @Html.DisplayFor(model => model.Name) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.Price) </div> <div class="display-field"> @Html.DisplayFor(model => model.Price) </div> </fieldset> <p> @Html.ActionLink("编辑", "Edit", new { id=Model.Id }) | @Html.ActionLink("首页", "Index") </p>
小结：
在使用PagedList组件实现分页：主要就以下几步：
1、在后台代码中引入：using PagedList;命名空间，同时获得数据源【注意数据源的类型一定要转换成IEnumerable或是IQueryable，或是继承这两个型别的子类也可以】：data。
2、通过var pagedata = data.ToPagedList(pageNumber:p,pageSize:2) 获得分页后的结果信息：其中pageNumber：表示当前是第几页，PageSize：表示每页展示的数据的条数。
3、在页面顶部引入以下两个命名空间：
@using PagedList
@using PagedList.Mvc
4、当安装好了PagedList组件后，在项目的Content文件夹下，会有一个PagedList.css的默认的分页所需的样式表，在使用@Html.PagedListPager之前引用它。会让分页更加好看
5、在View页面上通过@Html.PagedListPager(list: data, generatePageUrl: Page => Url.Action("Index", new { p=Page}))辅助方法输出分页所需的分页导览链接。其中list：对应的是数据【控制器传到页面上的数据】，但是这个类型要转为IpagedList<T>类型的。，generatePageUrl：就是分页导航链接。
写写博客，方便自己也方便有需要的人！*_*!
