Asp.net Mvc and Boostrap 4 Pagination - Show active current page

Question

The code is doing the pagination correctly, however, I am unable to use the boostrap class that shows the active page

<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>

The part that should show the active item is this, but for some reason, this class is not working

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

HTML output:

As can be seen in HTML, the class is called, but it doesn't pass anything to it...

<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>

What is the outputed HTML? – Rafael Duarte Mar 18 '20 at 15:04 — Rafael Duarte, Mar 18 '20 at 15:04
@RafaelDuarte edited my post with the HTML code – AllPower Mar 18 '20 at 15:10 — AllPower, Mar 18 '20 at 15:10

Rafael Duarte · Accepted Answer · 2020-03-18T15:33:10.337

0

You're not adding quotes to the class property value, adding quotes will make your HTML render properly:

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

edited Mar 18 '20 at 15:33

answered Mar 18 '20 at 15:12

Rafael Duarte

569
6
21

I made the changes you suggested, it is not showing yet, but now the html code of the active page looks like this:
2

AllPower

Mar 18 '20 at 15:29

1

Thx man, works great, Could you tell me why it only works using this html helper markup? – AllPower Mar 18 '20 at 15:46

No problem, I think this answer explains it quite well - https://stackoverflow.com/a/35106148/7586354 – Rafael Duarte Mar 18 '20 at 15:51

Asp.net Mvc and Boostrap 4 Pagination - Show active current page

1 Answers1