mvc 封裝控制項使用mvcpager

標籤：ant   代碼   prim   record   type   display   render   group   xbox   

具體使用如下：

前台部分：

@RenderPage("~/Views/Controls/_Pagebar.cshtml",    new PageBar    {        pageIndex = Model.CurrentPageIndex,        recordCount = Model.TotalItemCount,        UpdateTargetId = "expList",//此處填寫需要更新的div（或其他）容器的id        pageSize=10,        DataFormId = "Submit_Expense"//此處填寫需要提交的表單的id})

View Code

 

 需要建立一個PagerBar類，如下：

  /// <summary>        /// 當前頁碼        /// </summary>        public int pageIndex;        /// <summary>        /// 記錄總條目數        /// </summary>        public int recordCount;        /// <summary>        /// 每頁顯示記錄的數量        /// </summary>        public int pageSize;        /// <summary>        /// 更新容器的ID        /// </summary>        public string UpdateTargetId;        /// <summary>        /// 表單ID        /// </summary>        public string DataFormId;  /// <summary>        /// 訪問路由        /// </summary>        public string RouteUrl= HttpContext.Current.Request.Url.ToString();

pagebar

 

控制項代碼

@{    //非同步ajax重新整理    var pageBar = (PageBar)PageData.FirstOrDefault().Value;    int pageindex = pageBar.PageIndex-1;    int spitindex = 0;    int pageSize = pageBar.PageSize;    var pageCount = 10;    int recordCount = pageBar.RecordCount;    int pagecount = recordCount % pageSize == 0 ? recordCount / pageSize : recordCount / pageSize + 1;    var routeUrl = pageBar.RouteUrl;    var updateTargetId = pageBar.UpdateTargetId;    var dataFormId = pageBar.DataFormId;    var pageLast = pageindex > 1;    var pageNext = pageindex != pagecount;}<style type="text/css">    .disabled {        color: #777 !important;    }        .disabled  {            cursor: not-allowed;        }</style>@if (pagecount > 1){    <div class="row" style="height: 80px; ">        <div class="col-md-8 col-sm-8">            <ul class="pagination">                               <li calss="@pageLast">                    @if (pageLast)                    {                        <a href="javascript:void(0)" onclick="pageSkip(@pageindex-1)">上頁</a>                    }                    else                    {                        <a href="javascript:void(0)" class="disabled">上頁</a>                    }                </li>                @{ spitindex = pageindex - pageSize;}                @if (spitindex > pageSize)                {                    <li><a href="javascript:void(0)" onclick="pageSkip(1)">1</a> </li>                    <li><a href="javascript:void(0)" onclick="pageSkip(@spitindex - 2)">...</a> </li>                }                else                {                    for (int i = 0; i < spitindex; i++)                    {                        <li><a href="javascript:void(0)" onclick="pageSkip(@i)">@Html.Raw(i + 1)</a> </li>                    }                }                @for (int i = pageindex - 2; i < pageindex; i++)                {                    if (i >= pageindex || i < 0)                    {                        continue;                    }                    <li><a href="javascript:void(0)" onclick="pageSkip(@i)">@Html.Raw(i + 1)</a> </li>                }                <li class="active"><a href="javascript:void(0)" id="selectpage"><b>@Html.Raw(pageindex + 1)</b> </a></li>                @for (int i = pageindex + 1; i < pagecount; i++)                {                    if (i >= pageindex + pageCount)                    {                        break;                    }                    <li><a href="javascript:void(0)" onclick="pageSkip(@i+1)">@Html.Raw(i + 1)</a> </li>                }                @{ spitindex = pageindex + pageCount; }                @if (pagecount - pageSize > spitindex)                {                    <li><a href="javascript:void(0)" onclick="pageSkip(@spitindex + 2)">...</a> </li>                    <li><a href="javascript:void(0)" onclick="pageSkip(@pagecount - 1)">@pagecount</a> </li>                }                else                {                    for (int i = spitindex; i < pagecount; i++)                    {                        <li><a href="javascript:void(0)" onclick="pageSkip(@i)">@Html.Raw(i + 1)</a> </li>                    }                }                <li>                    @if (pageNext)                    {                        <a href="javascript:void(0)" onclick="pageSkip(@pageindex + 1)">下頁</a>                    }                    else                    {                        <a href="javascript:void(0)" class="disabled">下頁</a>                    }                </li>                         </ul>        </div>        <div class="col-md-2 col-sm-2">            <div class="input-group" style="margin: 20px 0">                <input type="text" id="pageIndexBox" class="form-control input-sm" />                <span class="input-group-btn"><button class="btn btn-primary btn-sm" onclick="goToPage()">跳轉</button></span>            </div>        </div>        <div class="col-md-2 col-sm-2" style="line-height: 70px; text-align:right;">共 @pagecount 頁&nbsp; @recordCount 條記錄</div>    </div>                    }<script type="text/javascript">    function pageSkip(pageIndex) {        var requestUrl = ‘@routeUrl‘;        var formData = $("#@dataFormId").serialize() + "&pageIndex=" + pageIndex;        //debugger        $.post(requestUrl, formData, function (pageobj) {            $("#@updateTargetId").html(pageobj);        }, "html");    }    function goToPage() {        var pageIndex = $("#pageIndexBox").val();        pageSkip(pageIndex);    }</script>

View Code

 

後台部分：

採用的是MVCPager外掛程式，暫未開發自己的外掛程式。

mvc 封裝控制項使用mvcpager