楊濤老師MvcPager示例

楊濤老師插件地址：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

最後：文章旨在記錄自己的所學所用，如有錯誤，希望各位能及時指出，本人不勝感激！