MvcPager控制元件實現列表分頁
阿新 • • 發佈:2019-02-01
近期的專案中需要實現新聞列表分頁,嘗試了一下MvcPager,還是非常好用的,先看效果:
View中的程式碼:
樣式沒有貼出來,大家根據自己需求加就好。
<pre name="code" class="html">@*模型空間*@ @model PagedList<HBJLWebSite.ViewModel.NewsViewModel> @*引用MvcPager*@ @using Webdiyer.WebControls.Mvc; <span style="font-family: Arial, Helvetica, sans-serif;"><table></span> @{ bool flag = true; foreach (var info in Model) { flag = !flag; <tr class="@(flag ? "even" : "odd")"> <td><a>@Html.DisplayFor(model => info.NewsTitle)</a></td> <td>@Html.DisplayFor(model => info.TimeStamp)</td> </tr> } } </table> @Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ShowPageIndexBox = true, FirstPageText = "首頁", PrevPageText = "上一頁", NextPageText = "下一頁", LastPageText = "末頁", PageIndexBoxType = PageIndexBoxType.TextBox, PageIndexBoxWrapperFormatString = "請輸入頁數{0}", GoButtonText = "轉到" }) @Html.Raw("共記:") @Model.TotalItemCount @Html.Raw("條,每頁 5 條 ") @Model.CurrentPageIndex @Html.Raw("/") @Model.TotalPageCount @Html.Raw("頁")
Controller中的程式碼:
這裡寫你自己的分頁查詢程式碼即可
public ActionResult Index(int? id = 1) { int totalCount = 0; //總條數 int pageIndex = id ?? 1; //當前頁 int pageSize = 5; //每頁條數 var enNews = new NewsViewModel() { CategoryID = new Guid(Request["categoryID"] ?? "45C3BE2C-4761-94BB-7287-BF8E317E2DF3") }; //宣告WCF服務 var service = ServiceFactory.GetService(); //查詢新聞 var listNews = service.QueryNews(enNews, pageSize, pageIndex, out totalCount); //組裝資料 var listNewsInfo = new PagedList<NewsViewModel>(listNews, pageIndex, pageSize, totalCount); return View(listNewsInfo); }