无刷新分页：
1.引入JQuery的NuGet程序包
2.引入
程序包
3.引入MvcPager.dll ,MvcPager.dll文件下载链接http://pan.baidu.com/s/1hsvBYcc 密码：baws
4.引入MvcPager.js 和MvcPager.min.js 文件下载链接（同上3所示）
5.代码编写
Controller：
public class HomeController : Controller { // // GET: /Home/ int pageSize = 2; [HttpGet] public ActionResult Index(int pageIndex = 1) { var list = PrepareUserList(); //list为取到的所有数据 PagedList<User> p_list = list.ToPagedList(pageIndex, pageSize); if (Request.IsAjaxRequest()) //判断请求是否为Ajax请求 { return PartialView("ShowPart", p_list); } return View(p_list); } [HttpPost] public ActionResult Index(string keyword,int pageIndex = 1) { var list = PrepareUserList(); PagedList<User> p_list = list.ToPagedList(pageIndex, pageSize); if (Request.IsAjaxRequest()) { p_list = string.IsNullOrEmpty(keyword) ? p_list : list.Where(p=>p.Name.Contains(keyword)).ToPagedList(pageIndex, pageSize); return PartialView("ShowPart",p_list); } return View(p_list); } //此类是为了制造数据，方便可以不用从数据库调数据也能运行程序，若从数据库取数据则不需要此类 public List<User> PrepareUserList() { List<User> list = new List<User>(); User u1 = new User() { Id = 1, Address = "sda", Name = "das" }; User u11 = new User() { Id = 2, Address = "a", Name = "gffs" }; User u12 = new User() { Id = 3, Address = "b", Name = "dfts" }; User u13 = new User() { Id = 4, Address = "c", Name = "dfg" }; User u14 = new User() { Id = 5, Address = "sda", Name = "vb" }; User u15 = new User() { Id = 6, Address = "sa", Name = "hj" }; User u16 = new User() { Id = 7, Address = "eda", Name = "ui" }; User u10 = new User() { Id = 8, Address = "sda", Name = "we" }; User u110 = new User() { Id = 9, Address = "a", Name = "rf" }; User u120 = new User() { Id = 10, Address = "b", Name = "hy" }; User u130 = new User() { Id = 11, Address = "c", Name = "jy" }; User u140 = new User() { Id = 12, Address = "sda", Name = "nm" }; User u150 = new User() { Id = 13, Address = "sa", Name = "qr" }; User u160 = new User() { Id = 14, Address = "eda", Name = "ts" }; list.Add(u1); list.Add(u11); list.Add(u12); list.Add(u13); list.Add(u14); list.Add(u15); list.Add(u16); list.Add(u10); list.Add(u110); list.Add(u120); list.Add(u130); list.Add(u140); list.Add(u150); list.Add(u160); return list; } }
Index视图：
@{ Layout = null; } @using Webdiyer.WebControls.Mvc; @model PagedList<N_Refresh.Models.User> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="~/Scripts/MvcPager.js"></script> /*注意：这三个script文件是必须引用的文件，否则不能实现无刷新分页，Ajax请求过不去*/ </head> <body> <div> @using (Ajax.BeginForm("Index", "Home", new RouteValueDictionary { { "id", "" } }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "list", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { {"id","searchForm"} })) { <div class="row"> <span class="col-md-2">姓名：</span> <input name="keyword" type="text" class="col-md-3" /> <input type="submit" class="btn btn-primary btn-sm input-inline" value="搜索" /> </div> } </div> <div id="list"> @{ Html.RenderPartial("ShowPart", Model); } </div> <!--ShowPart是分部视图的名称 --> </body> </html>
分部视图ShowPart.cshtml
@using Webdiyer.WebControls.Mvc; @model PagedList<N_Refresh.Models.User> <table class="table table-bordered table-hover center-block top"> <tr> <td>姓名</td> <td>地址</td> </tr> @foreach (var item in Model) { <tr> <td>@item.Name</td> <td>@item.Address</td> </tr> } </table> <div> <div style="float:left;50%;">当前页 @Model.CurrentPageIndex 共 @Model.TotalPageCount 页，共 @Model.TotalItemCount 条记录 </div> @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ActionName = "Index", HtmlAttributes = new Dictionary<string, object> { { "style", "float:right" } }, ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class="active "><a href="javascript:void(0)">{0}</a></li>", DisabledPagerItemTemplate = "<li class="disabled"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", Id = "bootstrappager", AutoHide = false, FirstPageText = "首页", NextPageText = "下一页", PrevPageText = "上一页", LastPageText = "末页" }, new MvcAjaxOptions { UpdateTargetId = "list", //此为无刷新分页做准备，list为数据表格外层包围的div的id HttpMethod = "Post", DataFormId = "searchForm" //此为无刷新搜索做准备，searchForm为搜索的form的id }) </div>
6.忘记说了，模型类User.cs
public class User { public int Id { get; set; } public string Name { get; set; } public string Address { get; set; } }
6其实应该放在Controller之前，
至此，无刷新分页和搜索就完成了，
程序代码实现链接：http://pan.baidu.com/s/1eSh2VRW 密码：g1b1
欢迎大家进行批评指正