如何在 asp.net 核心中更改 `ReflectionIT.Mvc.Paging` 包样式

Question

我正在做一个 Asp.net core 2.2 项目并使用 ReflectionIT.Mvc.Paging 包进行分页。一切正常，但我想在我看来更改分页样式。

这是使用Pager视图组件的代码

    <nav>
        @await this.Component.InvokeAsync("Pager", new { PagingList = this.Model })
    </nav>

这是分页图片:

我想在上图中写 First 和 Last 而不是 1 和 15 并且想更改一些 css 样式。

Answer 1

如果需要，您也可以创建自己的寻呼机视图。您将其存储在文件夹 Views\Shared\Components\Pager :

例如，您可以调用 AddPaging 方法来设置 PagingOptions。这允许您在 ConfigureServicesfunction :

中指定哪个视图用于 Pager ViewComponent

// Register ViewComponent using an EmbeddedFileProvider & setting some options
services.AddPaging(options => {
    options.ViewName = "Bootstrap5";
    options.HtmlIndicatorDown = " <span>&darr;</span>";
    options.HtmlIndicatorUp = " <span>&uarr;</span>";
});

修改 Bootstrap5.cshtml 以满足您的要求：

@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">&laquo;</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">&raquo;</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>
}

输出：

Answer 2

试试这个

services.AddPaging(options => {
    options.ViewName = "Bootstrap4";
    options.HtmlIndicatorDown = " <span>&darr;</span>";
    options.HtmlIndicatorUp = " <span>&uarr;</span>";
});

如何在 asp.net 核心中更改 `ReflectionIT.Mvc.Paging` 包样式

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

paging

pagination

.net-core

asp.net-core