首页 > 解决方案 > Asp.net Mvc 和 Boostrap 4 分页 - 显示活动的当前页面

问题描述

代码正确地进行了分页,但是,我无法使用显示活动页面的 boostrap 类

<div class="page-nation">
        <ul class="pagination pagination-large">
            <li>
                @{
                    if (ViewBag.PageNumber> 1)
                    {

                        <a class="page-link" href="@Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber- 1 })">«</a>
                    }
                    else
                    {
                        <a class="page-link disabled">«</a>

                    }
                }
            </li>
            @{
                var currentPage= ViewBag.PageNumber;
                for (var i = 1; i <= ViewBag.totalCount; i++)
                {
                    <li @(currentPage== i ? "class= page-item active" : "")>
                        <a class="page-link" href="@Url.Action("Index", "Boats", new {search= ViewBag.searchData, pageNumber= i})">@i</a>
                    </li>
                }
            }

            <li>

                @if (ViewBag.PageNumber< ViewBag.totalCount)
                {
                    <a class="page-link" href="@Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber+ 1 })">»</a>
                }
                else
                {
                    <a class="page-link disabled">»</a>
                }

            </li>

        </ul>

    </div>

应该显示活动项目的部分是这个,但由于某种原因,这个类不起作用

<li @(currentPage== i ? "class= page-item active" : "")>

HTML 输出:

正如在 HTML 中可以看到的那样,该类被调用,但它没有向它传递任何东西......

<div class="page-nation">
    <ul class="pagination pagination-large">
        <li>
           <a class="page-link" href="/Barcos?numeroPagina=1">«</a>
        </li>
           <li>
               <a class="page-link" href="/Boats?pageNumber=1">1</a>
           </li>
           <li class="page-item" active="">
               <a class="page-link" href="/Boats?pageNumber=2">2</a>
           </li>
        <li>
               <a class="page-link disabled">»</a>
        </li>
    </ul>
</div>

标签: asp.net-mvctwitter-bootstrappagination

解决方案


您没有为class属性值添加引号,添加引号将使您的 HTML 正确呈现:

<li @Html.Raw(currentPage== i ? "class=\"page-item active\"" : "")>


推荐阅读