.net MvcPager+Ajax无刷新分页百度网盘链接:
https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw
1.新建Asp.net Web项目，重命名为MvcAppPager，再选择MVC框架，完成。
在项目“引用”下添加“MvcPager.dll”的引用
2.（为了将MVC框架默认的视图改为空页面）先将Views下的Home文件夹删掉，
再在Shared文件下的_Layout.cshtml改为如下代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>_Layout</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>
然后修改HomeController代码（全部复制即可）：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcAppPager.Models; using Webdiyer.WebControls.Mvc; namespace MvcAppPager.Controllers { public class HomeController : Controller { List<Order> list = new List<Order> { new Order { ID = 1, OrderNo = "2016050501", WayFee = 20,EMS="C01111" }, new Order { ID = 2, OrderNo = "2016050502", WayFee = 10,EMS="C01222" }, new Order { ID = 3, OrderNo = "201605050203", WayFee = 10,EMS="C01222" }, new Order { ID = 4, OrderNo = "201605050204", WayFee = 10,EMS="C01222" }, new Order { ID = 5, OrderNo = "201605050205", WayFee = 10,EMS="C01222" }, new Order { ID = 6, OrderNo = "201605050206", WayFee = 10,EMS="C01222" }, new Order { ID = 7, OrderNo = "201605050207", WayFee = 10,EMS="C01222" }, new Order { ID = 8, OrderNo = "201605050208", WayFee = 10,EMS="C01222" }, new Order { ID = 9, OrderNo = "201605050205", WayFee = 10,EMS="C01222" }, new Order { ID = 10, OrderNo = "2016050502010", WayFee = 10,EMS="C01222" }, new Order { ID = 11, OrderNo = "2016050502011", WayFee = 10,EMS="C01222" }, new Order { ID = 12, OrderNo = "201605050212", WayFee = 10,EMS="C01222" }, }; private const int PageSize = 2; private int counts; public ActionResult MvcPagerAjax(int id = 1) { counts = list.Count; PagedList<Order> lst = list.AsQueryable().ToPagedList(id, PageSize); lst.TotalItemCount = counts; lst.CurrentPageIndex = id; if (Request.IsAjaxRequest())//如果是Ajax请求 { return PartialView("OrderList", lst); } else { return View(lst); } } } }
并将RouteConfig.cs的路由改为;Home，MvcPagerAjax（action名）
3.在Models文件夹新建一个类Order.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcAppPager.Models { public class Order { public int ID { get; set; } public string OrderNo { get; set; } public decimal WayFee { get; set; } public string EMS { get; set; } } }
4.在Views下的Home文件夹新建MvcPagerAjax视图：
@model PagedList<MvcAppPager.Models.Order> @using Webdiyer.WebControls.Mvc; @Scripts.Render("~/Scripts/jquery-1.8.2.min.js") @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js") @{ Html.RenderPartial("OrderList", Model); } <div>@DateTime.Now.ToString()</div>
5.在Shared下新建 “局部视图” 名为OrderList，也就是说在新建视图的时候勾选 “ Create as a partial view”
@model PagedList<MvcAppPager.Models.Order> @using Webdiyer.WebControls.Mvc; <div id='divList'> <table> <tr> <th>ID</th> <th>订单号</th> <th>运单号</th> <th>运费</th> </tr> @if (Model != null && Model.Count > 0) { foreach (var item in Model.ToList()) { <tr> <td>@item.ID</td> <td>@item.OrderNo</td> <td>@item.EMS</td> <td>@item.WayFee</td> </tr> } } </table> @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ShowPageIndexBox = true, FirstPageText = "首页", PrevPageText = "上一页", NextPageText = "下一页", LastPageText = "末页", PageIndexBoxType = PageIndexBoxType.TextBox, PageIndexBoxWrapperFormatString = "请输入页数{0}", GoButtonText = "转到" }, new AjaxOptions { UpdateTargetId = "divList" }) <br /> >>分页 共有 @Model.TotalItemCount 条订单 @Model.CurrentPageIndex/@Model.TotalPageCount </div>
6.在Scripts文件夹下添加下面两个js文件，否则无法进行Ajax无刷新分页
jquery-1.8.2.min.js和jquery.unobtrusive-ajax.min.js
7.运行截图
