Установить элемент страницы активным или отключить с помощью нумерации страниц при загрузке 4, используя ASP.NET

Question

Я использовал этот код с начальной загрузкой 3, и он работал правильно, при нажатии на страницу он выглядел как активный, но при переключении на загрузочную версию 4 он больше не вызывает активный класс, когда я передаю номер страницы внутри"для"

Есть идеи, как решить эту проблему?

<ul class="pagination">
    <li class="page-item ">
        @{
            if (ViewBag.pageNumber> 1)
            {

                <a class="page-link" href="@Url.Action("Index", "Barcos", new { search= ViewBag.Search, pageNumber= ViewBag.pageNumber- 1 })">before</a>
            }
            else
            {
                <a class="page-link" href="#">
                    before
                </a>
            }
        }
    </li>
    @{
        var page = ViewBag.pageNumber;
        for (var i = 1; i <= ViewBag.Count; i++)
        {
            <li @(page== i ? "class=page-item active" : "")>
                <a class="page-link" href="@Url.Action("Index", "Barcos", new {search= ViewBag.Search, pageNumber= i})">@i</a>
            </li>
        }
    }

    <li>

        @if (ViewBag.pageNumber< ViewBag.count)
        {
            <a class="page-link" href="@Url.Action("Index", "Barcos", new { Search= ViewBag.Search, pageNumber= ViewBag.pageNumber+ 1 })">Next</a>
        }
        else
        {

             <a class="page-link disabled" href="#">
                    Before
                </a>
        }

    </li>

</ul>

Answer 1

Вам нужен class = "page-item" для всех элементов списка, а не только для вашей текущей страницы.

Исправлено ниже.

@for (var i = 1; i <= ViewBag.Count; i++)
{

    var page = ViewBag.pageNumber;
    string classes = "page-item";

    if (page == i)
    {
        classes += " active";

    }

    <li class="@classes">
        @Html.ActionLink(i.ToString(), "Index", "Barcos", new { search = ViewBag.Search, pageNumber = i }, new { @class = "page-link" })
    </li>
}

Это генерирует следующий HTML

<ul class="pagination">
    <li class="page-item ">
        <a class="page-link" href="/Barcos/Index?pageNumber=1">before</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="/Barcos/Index?pageNumber=1">1</a>
    </li>
    <li class="page-item active">
        <a class="page-link" href="/Barcos/Index?pageNumber=2">2</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="/Barcos/Index?pageNumber=3">3</a>
    </li>
    <li>
        <a class="page-link" href="/Barcos/Index?pageNumber=4">Next</a>
    </li>
</ul>