asp.net-core - 如何在 asp.net 核心中更改“ReflectionIT.Mvc.Paging”包样式
问题描述
我正在开发一个Asp.net core 2.2
项目并使用ReflectionIT.Mvc.Paging
包进行分页。一切都很好,但我想在我看来改变分页样式。
这是使用Pager
视图组件的代码
<nav>
@await this.Component.InvokeAsync("Pager", new { PagingList = this.Model })
</nav>
这是寻呼图片:
我想在上面的图片中写First
AndLast
而不是1
And15
并想更改一些 css 样式。
解决方案
You can also create your own Pager view if you want to. You store it in the folder Views\Shared\Components\Pager
:
You can for instance call the AddPaging
method which you can use to set the PagingOptions
. This allows you to specify which View is used for the Pager ViewComponent , in ConfigureServices
function :
// Register ViewComponent using an EmbeddedFileProvider & setting some options
services.AddPaging(options => {
options.ViewName = "Bootstrap5";
options.HtmlIndicatorDown = " <span>↓</span>";
options.HtmlIndicatorUp = " <span>↑</span>";
});
Modify the Bootstrap5.cshtml
to fit your requirement :
@model ReflectionIT.Mvc.Paging.IPagingList
@* Fake Boostrap 5 based pager *@
@{
var start = this.Model.StartPageIndex;
var stop = this.Model.StopPageIndex;
}
@if (this.Model.PageCount > 1) {
<ul class="pagination pagination-sm justify-content-end">
@if (start > 1) {
<li class="page-item">
<a href="@Url.Action(Model.Action, Model.GetRouteValueForPage(1))" aria-label="First" class="page-link">
<span aria-hidden="true">First</span>
</a>
</li>
}
@if (this.Model.PageIndex > 1) {
<li class="page-item">
<a href="@Url.Action(Model.Action, Model.GetRouteValueForPage(this.Model.PageIndex - 1))" aria-label="Previous" class="page-link">
<span aria-hidden="true">«</span>
</a>
</li>
}
@for (int i = start; i <= stop; i++) {
<li class="page-item @((Model.PageIndex == i) ? "active" : null)">
@if (i == 1)
{
@Html.ActionLink("First", Model.Action, Model.GetRouteValueForPage(i), new { @class = "page-link" })
}
else{
@Html.ActionLink(i.ToString(), Model.Action, Model.GetRouteValueForPage(i), new { @class = "page-link" })
}
</li>
}
@if (this.Model.PageIndex < this.Model.PageCount) {
<li class="page-item">
<a href="@Url.Action(Model.Action, Model.GetRouteValueForPage(this.Model.PageIndex + 1))" aria-label="Next" class="page-link">
<span aria-hidden="true">»</span>
</a>
</li>
}
@if (stop < this.Model.PageCount) {
<li class="page-item">
<a href="@Url.Action(Model.Action, Model.GetRouteValueForPage(this.Model.PageCount))" aria-label="Last" class="page-link">
<span aria-hidden="true">Last</span>
</a>
</li>
}
</ul>
}
Output :
推荐阅读
- asp.net-core - GetService 与 ApplicationServices 和 IServiceProvider 有什么区别?
- python - 将自定义用户身份验证添加到 django-rest-framework-simple-jwt
- r - 不从源代码安装软件包的含义?
- r - 在 R 中查询 PostgreSQL 数据库时,如何修复警告消息“关闭打开的结果集,取消先前的查询”?
- java - 如何从 Web 读取 JSON 数据并将插入插入数据库
- ios - iOS VoiceOver 读取accessibilityIdentifier 而不是accessibilityLabel
- c++ - 使用visual studio代码调试c ++代码时出现问题,带有lunch.json文件
- json - 使用 Google APP 脚本在 Google SpreadSheet 中导入 JSON 对象
- asp.net-core - 颤振的 SignalR 集线器连接错误
- python - Selenium Geckodriver Firefox 不能在 CRONTAB 中工作,在终端上工作