1. 程式人生 > >MvcPager控制元件實現列表分頁

MvcPager控制元件實現列表分頁

近期的專案中需要實現新聞列表分頁,嘗試了一下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);
        }