I am working on a Asp.net core 2.2 project and use ReflectionIT.Mvc.Paging package for paging.
Every thing is ok but i want to change paging style in my view.
Here is code to use Pager view component
<nav>
@await this.Component.InvokeAsync("Pager", new { PagingList = this.Model })
</nav>
And here is paging pic :
I want to write First And Last instead of 1 And 15 in above pic and want to change some css styles.
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 ConfigureServicesfunction :
// 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 :
Try this one
services.AddPaging(options => {
options.ViewName = "Bootstrap4";
options.HtmlIndicatorDown = " <span>↓</span>";
options.HtmlIndicatorUp = " <span>↑</span>";
});
