I am a student and quite new to ASP.NET MVC and I come from ASP.NET Web Form. (Used to it)

I got a list :

<ul class="sidebar bg-grayDark">
    <li class="active">
        <a href="@Url.Action("Index", "Home")">
            <span class="mif-home icon"></span>
            <span class="title">Home</span>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "Product")">
            <span class="mif-shop icon"></span>
            <span class="title">Products</span>
            <span class="counter">14</span>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "Category")">
            <span class="mif-flow-cascade icon"></span>
            <span class="title">Categories</span>
            <span class="counter">9</span>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "User")">
            <span class="mif-users icon"></span>
            <span class="title">Users</span>
            <span class="counter">1</span>

My goal : By which view is rendered, I want to add "active" to the that has been clicked on. Example : I click on "Category", then Home loses his active class and Category has "active" added to his class. (and the reverse thing with "bg-hover-black")

I thought I could do it by checking the view actually rendered but I don't know how to do it. (I don't know how to check the actual view rendered, but using Razor to check conditions is okay)

I tried with JavaScript first :

    $(function () {
        $('.sidebar').on('click', 'li', function () {
            if (!$(this).hasClass('active')) {
                $('.sidebar li').removeClass('active');

But it doesn't work because when the page loads, the html is re-rendered with "active" for the Home part. (If I remove "active" for Home, then nothing will be active onClick, except between click and page load).

Have you any solution ? I searched a lot on the web but found nothing to help me.

Sorry for any english mistakes, I'm still learning it :).



Related posts

Recent Viewed