扩展控件实现效果如下图
但可能存在以下问题,
问题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>
}
感觉我们自己写不够专业,源码见附件。