杨涛老师MvcPager示例

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

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

一、标准的ajax分页

1、新建一个空的MVC项目

2、搜索安装 MvcPager

3、控制器中添加方法

 1         /// <summary 
 2         /// 单个分页 
 3         /// </summary>
 4         /// <returns></returns>
        [HttpGet]
        public ActionResult SinglePage(int id = 1)
        {
            List<Article> articles = new List<Article>();
            for (int i = 0; i < 10; i++)
            {
                Article a = new Article();
                a.ID = id;
                a.Title = "Title " + id;
                a.Content = "Content " + id;
                articles.Add(a);
            }
               //注：看官网问题留言有部分同学在看了杨老师demo之后不清楚如何根据条件去数据库取对应页的数据，而不是将集合数据取出来再进行分页，其实只要把源码下载下来看一下里面方法的实现就好了。
            PagedList<Article> model = new PagedList<Article>(articles, id, 10, 100);//articles-当前页记录、id-页码、10-每页记录条数、100-总记录条数
            if (Request.IsAjaxRequest())
                return PartialView("_ArticleList", model);
            return View(model);
        }

 

4、添加视图 SinglePage.cshtml、分部视图 _ArticleList.cshtml、_ArticleTable.cshtnl

SinglePage.cshtml

@using Webdiyer.WebControls.Mvc
@model PagedList<MvcPagerTest.Models.Article>
 
<div id="articles">
    @Html.Partial("_ArticleList", Model)
</div>
@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
}

_ArticleList.cshtml

@using Webdiyer.WebControls.Mvc
@model PagedList<MvcPagerTest.Models.Article>
 
<div class="text-center">
    @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"))
</div>
 
@{ Html.RenderPartial("_ArticleTable"); }
 
<div class="text-center">
    @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"))
</div>

_ArticleTable.cshtnl

@using Webdiyer.WebControls.Mvc
@model PagedList<MvcPagerTest.Models.Article>
 
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Content)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Content)
            </td>
        </tr>
    }
</table>

 

5、运行

运行程序会出现错误：以下各节已定义，但尚未为布局页“~/Views/Shared/_Layout.cshtml”呈现:“Scripts”。

解决方法：在_Layout.cshtml中添加代码 @RenderSection("scripts", required: false)

 

运行结果：

二、多个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

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