'How to make the corresponding text bold depending on the URL visited/link clicked in ASP.NET Core?

I have this rather primitive issue, but I have no idea how to solve this:

I have a side hierarchy menu in one of many Razor pages and for now I just manually make the current page bold in the HTML.

  • Is there a possibility to automate this?
  • What's the best approach for giving the state of the current page?
  • Does ASP.NET Core have an integrated function/etc for this?

Here's how my side menu looks like:

<div class="col-sm-2 side-menu" style="">
      <ul id="menu-map" class="menu" style="">
          <li class=""><a href="/test1" aria-current="page">
            <span>TEST1</span>
          </a></li>        
          <li class=""><a href="/test2" aria-current="page">
            <span>test2</span>
          </a></li>
          <li class=""><a href="/test3" aria-current="page">
            <span>test3</span>
          </a></li>
          <li class=""><a href="/test4" aria-current="page">
            <span>test4</span>
          </a></li>
          <li class=""><a href="/test5" aria-current="page">
            <span><strong>test5</strong></span>
          </a></li>
      </ul>
</div>

col-sm-2 is a Bootstrap 4 class, yes.

Another ELI5 example:

In the side menu above if I click on TEST1 the TEST1 gets bold text, if I click on test2, test2 gets bold text on that page. (/test1 and /test2 correspondently)

A CSS solution might kind of work, but what if the user gets a link to one of the pages? Hence a pure CSS solution is not viable in my opinion.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source