How to change `ReflectionIT.Mvc.Paging` package style in asp.net core - asp.net-core

Question

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.

Answer 1

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 :

Answer 2

Try this one
services.AddPaging(options => {
options.ViewName = "Bootstrap4";
options.HtmlIndicatorDown = " <span>↓</span>";
options.HtmlIndicatorUp = " <span>↑</span>";
});