杨涛老师插件地址：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
最后：文章旨在记录自己的所学所用，如有错误，希望各位能及时指出，本人不胜感激！