杨涛老师MvcPager示例
2018-06-22 06:17:10来源:未知 阅读 ()
杨涛老师插件地址:http://www.webdiyer.com/mvcpager
杨涛老师网站上示例写的很详细了,参考他的示例和帮助文档就可以运用的很好了,有经验的同学可以直接参考官方示例。
一、标准的ajax分页
1、新建一个空的MVC项目
1 /// <summary
2 /// 单个分页
3 /// </summary>
4 /// <returns></returns> 5 [HttpGet] 6 public ActionResult SinglePage(int id = 1) 7 { 8 List<Article> articles = new List<Article>(); 9 for (int i = 0; i < 10; i++) 10 { 11 Article a = new Article(); 12 a.ID = id; 13 a.Title = "Title " + id; 14 a.Content = "Content " + id; 15 articles.Add(a); 16 }
//注:看官网问题留言有部分同学在看了杨老师demo之后不清楚如何根据条件去数据库取对应页的数据,而不是将集合数据取出来再进行分页,其实只要把源码下载下来看一下里面方法的实现就好了。 17 PagedList<Article> model = new PagedList<Article>(articles, id, 10, 100);//articles-当前页记录、id-页码、10-每页记录条数、100-总记录条数 18 if (Request.IsAjaxRequest()) 19 return PartialView("_ArticleList", model); 20 return View(model); 21 }
1 @using Webdiyer.WebControls.Mvc 2 @model PagedList<MvcPagerTest.Models.Article> 3 4 <div id="articles"> 5 @Html.Partial("_ArticleList", Model) 6 </div> 7 @section scripts 8 { 9 @{Html.RegisterMvcPagerScriptResource();} 10 }
1 @using Webdiyer.WebControls.Mvc 2 @model PagedList<MvcPagerTest.Models.Article> 3 4 <div class="text-center"> 5 @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" }).AjaxOptions(a => a.SetUpdateTargetId("articles")) 6 </div> 7 8 @{ Html.RenderPartial("_ArticleTable"); } 9 10 <div class="text-center"> 11 @Ajax.Pager(Model, new PagerOptions { AlwaysShowFirstLastPageNumber = true, PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" }).AjaxOptions(a => a.SetUpdateTargetId("articles")) 12 </div>
1 @using Webdiyer.WebControls.Mvc 2 @model PagedList<MvcPagerTest.Models.Article> 3 4 <table class="table table-bordered table-striped"> 5 <tr> 6 <th class="nowrap">序号</th> 7 <th> 8 @Html.DisplayNameFor(model => model.Title) 9 </th> 10 <th> 11 @Html.DisplayNameFor(model => model.Content) 12 </th> 13 </tr> 14 @{ int i = 0;} 15 @foreach (var item in Model) 16 { 17 <tr> 18 <td>@(Model.StartItemIndex + i++)</td> 19 <td> 20 @Html.DisplayFor(modelItem => item.Title) 21 </td> 22 <td> 23 @Html.DisplayFor(modelItem => item.Content) 24 </td> 25 </tr> 26 } 27 </table>
二、多个ajax分页
多个ajax分页和单个ajax分页类似,这里要注意的是:
1、不同的分页控件要定义不同页码参数名称(如下:第一个定义 为pageIndex,第二个定义为 id)
2、后台通过自定义参数来区分获取的是哪个分页的数据,这里通过AddRouteValue("param","value")来添加
//PageIndexParameterName设置页码参数名称; @Ajax.Pager(Model).Options(o=>o.AddRouteValue("target","blog1"))生成分页链接的路由的值。 @Ajax.Pager(Model, new PagerOptions { AlwaysShowFirstLastPageNumber = true, PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" }).Options(o => o.AddRouteValue("target", "blog2")).AjaxOptions(a => a.SetUpdateTargetId("blog2s"))
/// <summary> /// 多个分页 /// </summary> /// <returns></returns> [HttpGet] public ActionResult MultiPage(int pageIndex = 1,int id = 1) { if (Request.IsAjaxRequest()) { string target = Request.QueryString["target"];//通过target来区分获取的是哪个分页数据。 if (target == "blog1") { return PartialView("_Blog1List", new PagedList<Blog1>(GetBlog1s(pageIndex), pageIndex, 10, 100));//页码参数名称为pageIndex } if (target == "blog2") { return PartialView("_Blog2List", new PagedList<Blog1>(GetBlog1s(id), id, 10, 100));//页码参数名称为id } } Blog blog = new Blog(); blog.Blog1s = new PagedList<Blog1>(GetBlog1s(pageIndex), pageIndex,10, 100); blog.Blog2s = new PagedList<Blog2>(GetBlog2s(id), id, 10, 100); return View(blog); } public List<Blog1> GetBlog1s(int pageIndex) { List<Blog1> blog1s = new List<Blog1>(); for (int i = 0; i < 10;i++) { blog1s.Add(new Blog1(pageIndex, "name1-" + pageIndex, "content1-"+ pageIndex)); } return blog1s; } public List<Blog2> GetBlog2s(int id) { List<Blog2> blog2s = new List<Blog2>(); for (int i = 0; i < 10; i++) { blog2s.Add(new Blog2(id, "name2-" + id, "content2-" + id)); } return blog2s; }
示例地址(vs2015):https://files.cnblogs.com/files/zhaorong0912/MvcPagerDemo.rar
最后:文章旨在记录自己的所学所用,如有错误,希望各位能及时指出,本人不胜感激!
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- MvcPager分页控件使用注意事项 2019-11-01
- 详解MVC分页之MvcPager的使用操作 2019-08-09
- ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上 2019-07-23
- MVC分页控件 2018-06-22
- MvcPager使用的Demo(同步分页) 2018-06-22
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash