【MVC】使用MvcPager進行分頁

1、添加引用： mvcPager

　　版本高的提供的功能也更多。

　　注：下載了第一個，但是里面的一些字段是只讀的。（eg：PagedList<T> .TotalItemCount）這是不符合的。

2、添加控制器

　　在控制器中添加方法 MvcPagerAjax()，從db獲取數據

/// <summary>
        /// 分頁，局部刷新。。直接請求該action
        /// </summary>
        /// <param name="pageIndex">此參數很重要，由分頁ajax中傳過來（PageIndexParameterName）</param>
        /// <param name="pageSize"></param>
        /// <returns></returns>
        public ActionResult MvcPagerAjax(int pageIndex = 1)
        {
            int pageSize = 10;  //每頁的數據條數
            List<MovieDB> lists = db.Movies.ToList();
            int counts = lists.Count;
            PagedList<MovieDB> lst = lists.AsQueryable().ToPagedList(pageIndex, pageSize);
            lst.TotalItemCount = counts;
            lst.CurrentPageIndex = pageIndex;
            if (Request.IsAjaxRequest())
            {
                return PartialView("PartailViewMList", lst);  //分頁，異步請求
            }
            else
            {
                return View("Mlist", lst); //初始加載時，不是ajax
            }
        }

　

3、添加主頁面

　　Mlist.cshtml

@model PagedList<MVCTest.Models.MovieDB>
@using Webdiyer.WebControls.Mvc

@{
    ViewBag.Title = "MList";
}

@{ 
    Html.RenderPartial("PartailViewMList", Model);
}

@*使用Ajax分頁模式時，必須用Html.RegisterMvcPagerScriptResource方法注冊客戶端腳本，否則無法正常分頁；*@
@*需要再_Layout中加入 @RenderSection("scripts", required: false)*@
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

4、添加分部頁

PartailViewMList.cshtml

　　名稱 PartailViewMList。就是controller中需要ajax返回的頁面return PartialView("PartailViewMList", lst);

　　分頁控件：http://www.webdiyer.com/mvcpager/demos/applycss/ 可以在官網上找各種樣式

視圖部分

@model PagedList<MVCTest.Models.MovieDB>
@using Webdiyer.WebControls.Mvc;

<div id="divList">
    <table>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Director</th>
            <th>Date</th>
        </tr>
        @if (Model != null && Model.Count > 0)
        {
            foreach (var item in Model.ToList())
            {
                <tr>
                    <td>@item.ID</td>
                    <td>@item.Title</td>
                    <td>@item.Director </td>
                    <td>@item.Date</td>
                </tr>
            }
        }
    </table>

    <div class="row" style="height:80px">
        <div class="col-md-2" style="margin:20px 0">
            共有 @Model.TotalItemCount 條記錄 @Model.CurrentPageIndex/@Model.TotalPageCount
        </div>
        <div class="col-md-6">
            @Ajax.Pager(Model, new PagerOptions
       {
           //PrevPageText = "上頁",
           //NextPageText = "下頁",
           //FirstPageText = "首頁",
           //LastPageText = "尾頁",
           PageIndexParameterName = "pageIndex",  //此參數傳入controller
           NumericPagerItemCount = 5,  //顯示幾個分頁號碼數據(可以控制省略號…的顯示）
           ContainerTagName = "ul",  //分頁標簽
           CssClass = "pagination",  //分頁樣式，位於bootstrap.css中
           CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",
           DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",
           PagerItemTemplate = "<li>{0}</li>",
           Id = "bootstrappager",
           //PageIndexBoxId = "pageIndexBox", //下拉框
           //GoToButtonId = "goToBtn",   //不設置的話，則頁索引文本或下拉框中的值改變時即自動實現分頁跳轉
           PageIndexBoxId = "pageIndexBox2",  //文本輸入框
           GoToButtonId = "goToBtn2"  //不設置的話，則頁索引文本或下拉框中的值改變時即自動實現分頁跳轉
       }, new MvcAjaxOptions { UpdateTargetId = "divList" })
            @*或者 }).AjaxOptions(a => a.SetUpdateTargetId("divList"))*@
        </div>
        <div class="col-md-4">
            <div class="input-group" style="width:120px;margin:20px 0">
                @*<select id="pageIndexBox" class="form-control input-sm"></select>
                    <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn">跳轉</button></span>*@
                <input type="text" id="pageIndexBox2" class="form-control input-sm" />
                <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">跳轉</button></span>
            </div>
        </div>
    </div>
    @*說明：要為MvcPager指定頁索引輸入或選擇框，請將PagerOptions.PageIndexBoxId設置為該文本框或下拉框的客戶端id，將PagerOptions.GoToButtonId設置為跳轉按鈕的客戶端id，若未設置PagerOptions.GoToButtonId，則頁索引文本或下拉框中的值改變時即自動實現分頁跳轉，否則需要點擊跳轉按鈕進行跳轉。*@
</div>

分頁默認是Get提交

5、翻頁時 附帶參數問題 

場景：假如有訂單查詢頁面，帶參數查詢出一些結果。在點第二頁的時候，需要保留文本框中的查詢參數。

一般情況下 表單提交才用Post，此種情況下 翻頁是不會帶參數的。需要將post改為Get才行。

 @using (Html.BeginForm("List", "ExpertBooking", FormMethod.Get, new { id = "frmReport" }))