使用 ASP.NET 使用引导程序 4 分页设置页面项活动或禁用答案

【问题标题】：Set a page Item Active or Disable with bootstrap 4 pagination, using ASP.NET使用 ASP.NET 使用引导程序 4 分页设置页面项活动或禁用
【发布时间】：2019-05-21 02:20:58
【问题描述】：

我在 bootstrap 3 中使用了这段代码，它工作正常，当点击页面时，它显示为活动的，但是当切换到 bootstrap 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>

【问题讨论】：

标签： c# asp.net-mvc pagination bootstrap-4

【解决方案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>

【讨论】：