Webdiyer.AspNetCore.MvcCorePager分页控件功能扩展

扩展控件实现效果如下图

 但可能存在以下问题，

问题1：前端Model为null，但通过this.ViewBag.Data方式可以正常使用？

最近在使用该分页控件，但无法法实现如下功能，花了一天改了一下，但感觉不稳定，导制views中的Model数据为空，注：GetUserListAsync中返回的数据只有10条，类型为Task<IPagedList<TEntity>>该类并非Webdiyer.AspNetCore.IPagedList<>

public async Task<IActionResult> Index(int pageIndex = 1, int pageSize = 10)

{

      var result = await this.service.GetUserListAsync(pageIndex, pageSize);

      //this.ViewBag.Data = result.DataList;//通过该方法前端可以取到数据

      return View(new Webdiyer.AspNetCore.PagedList<R_UserDto>(result.DataList, pageIndex, pageSize)

      {

           TotalItemCount = result.RecordCount

       });

}

问题2：目前最新版无法实现如下图的导航（这个是我修改源码后的效果），是否可以提供ControlTemplate的自定义模板（标黄处）？

以下是我实现的代码，感觉硬编码字符串的方式比较笨拙。

 <div class="col-1 float-left">

            @Html.Pager(Model, new PagerOptions{

            PageIndexParameterName = "pageIndex",

            PageSizeParameterName = "pageSize",

            TagName = "div",

            CssClass = "pagination",

            AutoHide = false,

            CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",

            DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",

            ControlTemplate = "<div class=\"col-2 form-group\" style=\"margin-top:2px;margin-left:3px;\">"+

            "   <label for=\"pageSizeBox\">每页显示</label>"+

            "   <select id=\"pageSizeBox\" class=\"form-control input-sm\" style=\"width:60px\">"+

            "   <option value=\"10\" selected=\"selected\">10</option></select>"+

            "</div>"+

            "<div class=\"form-group\" style=\"margin-top:2px;margin-left:3px;\"><label>条记录，共5条记录。</label></div>"+

            "<div class=\"form-group\">"+

            "   <label for=\"pageIndexBox\">转到第</label>"+

            "   <input type=\"text\" id=\"pageIndexBox\" class=\"form-control input-sm\" value=\"{0}\" style=\"width:50px\" /></div>"+

            "<div class=\"form-group\" style=\"margin-top:0px;margin-left:3px;\">"+

            "   <label class=\"control-label\">页</label>"+

            "   <label class=\"control-label\"><button class=\"btn btn-primary btn-sm\" id=\"goToBtn\">跳转</button>"+

            "</label></div>",

            PagerItemTemplate = "<li>{0}</li>",

            Id = "bootstrappager2",

            PageIndexBoxId = "pageIndexBox",

            PageSizeBoxId = "pageSizeBox",

            LastPageText="最后页",

            FirstPageText="第一页",

            NextPageText="下一页",

            PrevPageText="上一页",

            GoToButtonId = "goToBtn"

            })

        </div>

 

 

修改string GenerateHtml()等方法

 Index.cshtml代码

@using Parrotsoft.Models;

@using Webdiyer.AspNetCore

@{

    ViewData["Title"] = "Home Page";

}

@model PagedList<R_UserDto>

@section Styles{

    @*<link rel="stylesheet" href="~/Content/pagerstyles.css" asp-append-version="true" />*@

}

    <style type="text/css">

        body {

            line-height: 100%;

        }

        .pagination {

            margin: 0;

        }

            .pagination li {

                line-height: 100%;

            }

        label {

            font-weight: normal;

        }

    </style>

    <table class="table">

        <tbody>

            <tr>

                <th>用户名</th>

                <th>登录标识</th>

                <th>手机号</th>

                <th>备注</th>

            </tr>

            @foreach (var item in this.ViewBag.Data)

        {

            <tr>

                <td>

                    @item.UserName

                </td>

                <td>

                    @item.UserID

                </td>

                <td>

                    @item.Mobile

                </td>

                <td>

                    @item.Remark

                </td>

            </tr>

        }

    </tbody>

</table>

<div class="row" style="z-index:9999;">

    <div class="form-inline ml-5">

        <div class="col-1 float-left">

            @Html.Pager(Model, new PagerOptions{

            PageIndexParameterName = "pageIndex",

            PageSizeParameterName = "pageSize",

            TagName = "div",

            CssClass = "pagination",

            AutoHide = false,

            CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",

            DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",

            ControlTemplate = "<div class=\"col-2 form-group\" style=\"margin-top:2px;margin-left:3px;\">"+

            "   <label for=\"pageSizeBox\">每页显示</label>"+

            "   <select id=\"pageSizeBox\" class=\"form-control input-sm\" style=\"width:60px\">"+

            "   <option value=\"10\" selected=\"selected\">10</option></select>"+

            "</div>"+

            "<div class=\"form-group\" style=\"margin-top:2px;margin-left:3px;\"><label>条记录，共5条记录。</label></div>"+

            "<div class=\"form-group\">"+

            "   <label for=\"pageIndexBox\">转到第</label>"+

            "   <input type=\"text\" id=\"pageIndexBox\" class=\"form-control input-sm\" value=\"{0}\" style=\"width:50px\" /></div>"+

            "<div class=\"form-group\" style=\"margin-top:0px;margin-left:3px;\">"+

            "   <label class=\"control-label\">页</label>"+

            "   <label class=\"control-label\"><button class=\"btn btn-primary btn-sm\" id=\"goToBtn\">跳转</button>"+

            "</label></div>",

            PagerItemTemplate = "<li>{0}</li>",

            Id = "bootstrappager2",

            PageIndexBoxId = "pageIndexBox",

            PageSizeBoxId = "pageSizeBox",

            LastPageText="最后页",

            FirstPageText="第一页",

            NextPageText="下一页",

            PrevPageText="上一页",

            GoToButtonId = "goToBtn"

            })

        </div>

    </div>

</div>

@section Scripts{

    <script src="~/js/MvcCorePager/MvcCorePager.js" asp-append-version="true"></script>

}

感觉我们自己写不够专业，源码见附件。