码迷,mamicode.com
首页 > Web开发 > 详细

杨涛老师MvcPager示例

时间:2018-06-07 23:08:56      阅读:357      评论:0      收藏:0      [点我收藏+]

标签:sha   return   链接   mode   源码下载   min   结果   toolbar   star   

杨涛老师插件地址:http://www.webdiyer.com/mvcpager

杨涛老师网站上示例写的很详细了,参考他的示例和帮助文档就可以运用的很好了,有经验的同学可以直接参考官方示例。

一、标准的ajax分页

1、新建一个空的MVC项目

2、搜索安装 MvcPager
技术分享图片

 

3、控制器中添加方法
技术分享图片
 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 }
技术分享图片
 
4、添加视图 SinglePage.cshtml、分部视图 _ArticleList.cshtml、_ArticleTable.cshtnl
SinglePage.cshtml
技术分享图片
 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 }
技术分享图片
_ArticleList.cshtml
技术分享图片
 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>
技术分享图片
_ArticleTable.cshtnl
技术分享图片
 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>
技术分享图片
 
5、运行
运行程序会出现错误:以下各节已定义,但尚未为布局页“~/Views/Shared/_Layout.cshtml”呈现:“Scripts”。
解决方法:在_Layout.cshtml中添加代码 @RenderSection("scripts", required: false)
技术分享图片
 
运行结果:
技术分享图片

 

二、多个ajax分页

多个ajax分页和单个ajax分页类似,这里要注意的是:

1、不同的分页控件要定义不同页码参数名称(如下:第一个定义 为pageIndex,第二个定义为 id)

2、后台通过自定义参数来区分获取的是哪个分页的数据,这里通过AddRouteValue("param","value")来添加

1
2
//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"))

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/// <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

最后:文章旨在记录自己的所学所用,如有错误,希望各位能及时指出,本人不胜感激!

杨涛老师MvcPager示例

标签:sha   return   链接   mode   源码下载   min   结果   toolbar   star   

原文地址:https://www.cnblogs.com/sjqq/p/9152931.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!