CODEWITHSUNDEEP
c#htmlasp.net-core.net-corerazor
Munchkin
Munchkin

Reputation: 1085

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.

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.

Upvotes: 0

Views: 240

Answers (1)

Rena
Rena

Reputation: 36645

Does ASP.NET Core have an integrated function/etc for this?

It seems no such build-in function to achive this client side requirement.

Once you click the link, it will redirect to another page and lose the state of the anchor tag. So you can use localStorage to store the selected anchor tag's index. And add the font-weight: bold class to selected link:

<head>      
    <style>           
          .active{
                font-weight: bold;
            }
    </style>
</head>
<script>
    $(function(){
        var data = localStorage.getItem("index");
        if(data!=null)
        {
            $('ul li').eq(data).addClass('active');
        }
    })
    $("#menu-map").find('a').click(function () {
        var str = $(this).parents("li").index();
        localStorage.setItem("index",str);
    });
</script>

Upvotes: 1

Related Questions