How to add class to html elements in layout [ASP.NET MVC]

Question

I have the following problem.

In layout I have menu

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
        <li class="active">
            @Html.ActionLink("Blog","Posts","Blog",null,null)
        </li>

        <li>
            @Html.ActionLink("Książki", "Books", "Books", null,null)
        </li>

        <li>
            @Html.ActionLink("O mnie", "AboutMe", "Blog", null,null)
        </li>
    </ul>
</div>
<!--/navbar-collapse-->

I want to set class='active' for element that was clicked, so I wrote script below (Ignore that it can be written better) which is also in layout page.

<!-- JS Global Compulsory -->
<script type="text/javascript" src="~/Scripts/assets/plugins/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/assets/plugins/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- JS Implementing Plugins -->
<script type="text/javascript" src="~/Scripts/assets/plugins/back-to-top.js"></script>

<!-- JS Page Level -->
<script type="text/javascript" src="~/Scripts/assets/plugins/countdown/jquery.countdown.js"></script>
<script type="text/javascript" src="~/Scripts/assets/plugins/backstretch/jquery.backstretch.min.js"></script>

@RenderSection("scripts", required: false)

<script type="text/javascript" src="~/Scripts/assets/js/app.js"></script>
<script type="text/javascript">

    jQuery(document).ready(function () {
        App.init();

        $('.navbar-nav li').click(function () {

            var lis = $('.navbar-nav li');
            lis[0].classList.remove('active');
            lis[1].classList.remove('active');
            lis[2].classList.remove('active');

            this.classList.add('active');
        });
    });

</script>

But after I click on a link it doesn't change. I mean it changes when I step over the script, but after that it seems that the whole page is requested again and changes are overriden. How do I solve this?

Thanks for any replies.

Paweł

Answer 1

The problem you are running into here is that you are using a javascript function to set styling on a hyperlink...as you click on the link and begin to navigate away from the page. Javascript is a stateless language, and has no sense of the state it, or the page it is on, was in when you change pages...which is what clicking a hyperlink would be doing.

A better alternative in this case would be to use the onload event, look at your URL, and set the classes based on that. So, something to this effect:

html

<div class="collapse navbar-collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
        <li class="active" id="BlogLink">
            @Html.ActionLink("Blog","Posts","Blog",null,null)
        </li>

        <li id="BooksLink">
            @Html.ActionLink("Książki", "Books", "Books", null,null)
        </li>

        <li id="AboutLink">
            @Html.ActionLink("O mnie", "AboutMe", "Blog", null,null)
        </li>
    </ul>
</div>

js

$(document).load(function(){
    var currentUrl = window.location.href;
    if (currentUrl.toLowerCase().indexOf("blog") >= 0){
        $('#BlogLink').addClass('active');
    }
    if (currentUrl.toLowerCase().indexOf("books") >= 0){
         //And so on...
    }
});

I think there is a slightly better way to tackle this, but if you are going to use a stateless language to control your styling, you have to do it on the same page load where you want it to be visible.

Answer 2

Could you try something like this?

jQuery(document).ready(function () {
    $('.navbar-nav li').click(function (event) {
        $('.navbar-nav li').removeClass('active');
        $(this).addClass('active');
        event.preventDefault();
        return false;
    });
});

Answer 3

It seems you are confused about how JavaScript works with respect to separate HTTP requests and the loading of the page. JavaScript code is part of the current page and executes in the client's browser. Once you navigate to a different page, the whole process starts over again. The page loads, and then any JavaScript code is executed.

Your JavaScript code may be doing what you intend it to do, but after it runs, that page is left and another page is loaded from the server, so any client-side state is lost.

This code should be put on the server, instead of in JavaScript on the client. When you render the HTML in your views, you should set the active class on the appropriate element at that point. When the user clicks a link, it will request a different page from the server, and when you render the HTML for that page, you set the active class accordingly. No JavaScript code is required.