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ł

Why do you use four lines instead of $('.navbar-nav li').removeClass('active'); I can't ignore that :) — Regent
– Regent, Commented Oct 6, 2014 at 19:22
Instead of touching classList property you could use removeClass and addClass. — Krzysztof Jabłoński
– Krzysztof Jabłoński, Commented Oct 6, 2014 at 19:23

guildsbounty · Accepted Answer · 2014-10-06 19:35:47Z

4

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.

answered Oct 6, 2014 at 19:35

guildsbounty

3,3713 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Regent Over a year ago

Well, url handling is nearly the only way (even though the best one, of course, to do it on server side) in this case, +1.

Krzysztof Jabłoński · Accepted Answer · 2014-10-06 19:27:26Z

1

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;
    });
});

answered Oct 6, 2014 at 19:27

Krzysztof Jabłoński

1,9411 gold badge21 silver badges30 bronze badges

4 Comments

Marian Ban Over a year ago

i think he wants to navigate to different page after click.

Regent Over a year ago

There is no need in event.preventDefault(); if you use return false;

pawel.podsiadly Over a year ago

Thanks Krzysiek for a quick reply. Now it behaves the way I want, but this code fails to invoke action method in a controller (navigate to different page as MajoB noted). Should I call action methods in javascript code instead of using ActionLinks?

Krzysztof Jabłoński Over a year ago

As MajoB has pointed out, those links should direct the browser to a different page. Is such case you should rather read URL of page you're on (may be extracted from location object), then add class on corresponding list item.

wired_in · Accepted Answer · 2014-10-06 19:37:43Z

0

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.

answered Oct 6, 2014 at 19:37

wired_in

2,6133 gold badges28 silver badges32 bronze badges

3 Comments

pawel.podsiadly Over a year ago

Thanks, your explanation solved the problem. I used ViewBag in controller actions to set values in layout. Don't know if it's the best way, but it works.

wired_in Over a year ago

That works. You could also use ViewBag in the individual views for each page. Those values will be accessible in the Layout. A popular approach is to set a class on the <body> element that specifies the page, like <body class='blog'><a class='blog-link'>Blog</a></body> then in your css you can simply do .blog .blog-link { } to set the css for when blog is active.

wired_in Over a year ago

If you are opposed to using ViewBag to pass around values you could extract values for the current route to determine the current page. e.g. @ViewContext.RouteData["action"]

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related