mvc 封装控件使用mvcpager

具体使用如下：

前台部分：

@RenderPage("~/Views/Controls/_Pagebar.cshtml",

    new PageBar

    {

        pageIndex = Model.CurrentPageIndex,

        recordCount = Model.TotalItemCount,

        UpdateTargetId = "expList",//此处填写需要更新的div（或其他）容器的id

        pageSize=10,

        DataFormId = "Submit_Expense"//此处填写需要提交的表单的id

})

 

 需要新建一个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();

 

控件代码

@{
    //异步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>

 

后台部分：

采用的是MVCPager插件，暂未开发自己的插件。