ASP.NET C#, menu class="active" in Site Master page

Question

My project is an asp.net (C#). Menu buttons placed in Site Master page. I'm new on asp.net and c#. Could you help me to How I can add class="active" to menu buttons?

Ex:

<ul id="main_menu">
    <li><a href="Default.aspx">Home</a></li>
    <li>
        <a>Recipes</a>
        <ul id="recipes_menu">
            <li><a href="Recipes.aspx">Recipes 1</a></li>
            <li><a href="Recipes.aspx">Recipes 2</a></li>
            <li><a href="Recipes.aspx">Recipes 3</a></li>
            <li><a href="Recipes.aspx">Recipes 4</a></li>
            <li><a href="Recipes.aspx">Recipes 5</a></li>
            <li><a href="Recipes.aspx">Recipes 6</a></li>
            <li><a href="Recipes.aspx">Recipes 7</a></li>
            <li><a href="Recipes.aspx">Recipes 8</a></li>
            <li><a href="Recipes.aspx">Recipes 9</a></li>
            <li><a href="Recipes.aspx">Recipes 10</a></li>
        </ul>
    </li>
    <li><a href="Cooking.aspx">Cooking</a></li>
    <li><a href="Contact.aspx">Contact</a></li>
</ul>

Thank you!

Answer 1

<li class="active"><a href="Recipes.aspx">Recipes 1</a></li>

Answer 2

After your menu add this:

var page = (window.location.pathname).split("/");
var len = page.length;
$("li.active").removeClass("active");
$("li>a[href='" + page[len - 1] + "']").parents("li,li.dropdown").addClass("active");

li.dropdown is for menu which contains a submenu (can be added by adding a dropdown class).

Answer 3

My solution:

In Site.Master name the anchors with your Page class name:

<!-- Link to Activity.aspx.cs -->
<li><a id="Activity" runat="server" href="~/Activity">Activity</a></li>

...and add your styling, eg

.active
{
    font-weight:bold !important;
    font-size:110% !important;
    color:white !important;
}

In Site.Master.cs Page_Load add:

if (!IsPostBack)
{
    Type page = this.Page.GetType();
    System.Web.UI.Control control = FindControl(page.BaseType.Name);
    ((System.Web.UI.HtmlControls.HtmlAnchor)control).Attributes.Remove("class");
    ((System.Web.UI.HtmlControls.HtmlAnchor)control).Attributes.Add("class", "active");
}

Answer 4

Thank you for trying help me to find solution but I solved.

1. Just added id for each menu which I want to active,
2. Added window.onload = function () to js file,
3. Used window.location.pathname for get to path of page url,
4. Finally, when the page path is /Default , JS is adding class="active" to id="home" .
5. Done.

HTML:

<ul id="main_menu">
        <li><a id="home" href="Default.aspx">Home</a></li>
        <li>
            <a>Recipes</a>
            <ul id="recipes_menu">
                <li><a href="Recipes.aspx">Recipes 1</a></li>
                <li><a href="Recipes.aspx">Recipes 2</a></li>
                <li><a href="Recipes.aspx">Recipes 3</a></li>
                <li><a href="Recipes.aspx">Recipes 4</a></li>
                <li><a href="Recipes.aspx">Recipes 5</a></li>
                <li><a href="Recipes.aspx">Recipes 6</a></li>
                <li><a href="Recipes.aspx">Recipes 7</a></li>
                <li><a href="Recipes.aspx">Recipes 8</a></li>
                <li><a href="Recipes.aspx">Recipes 9</a></li>
                <li><a href="Recipes.aspx">Recipes 10</a></li>
            </ul>
        </li>
        <li><a id="cooking" href="Cooking.aspx">Cooking</a></li>
        <li><a id="contact" href="Contact.aspx">Contact</a></li>
    </ul>

JS:

window.onload = function () {
    var MenuHome = "/Default";
    var MenuCooking = "/Cooking";

    if (window.location.pathname === MenuHome) {
        document.getElementById("home").className = "active";
    } else {
        document.getElementById("home").className = "";
    }
    if (window.location.pathname === MenuCooking) {
        document.getElementById("cooking").className = "active";
    } else {
        document.getElementById("cooking").className = "";
    }
}