How do I make current menu item active in asp.net webforms

Question

I am using asp.net web user control to have my menu code all in one place however i have a problem in that I dont no how to tell it to append the active css class to a menu item for the current page.

<ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Soccer Managment</span> <i class="fa fa-angle-left pull-right"></i>
          </a>
          <ul class="treeview-menu">
            <li><a href="~/BackDoor/players/default.aspx?teamId=00000000-0000-0000-0000-000000000000&id=00000000-0000-0000-0000-000000000000" runat="server"><i class="fa fa-circle-o"></i> Players</a>
                   <li><a href="~/BackDoor/teams/default.aspx" runat="server"><i class="fa fa-circle-o"></i>Teams</a></li>                    
             <li><a href="~/BackDoor/districts/default.aspx" runat="server"><i class="fa fa-circle-o"></i> Districts</a></li>
                <li><a href="~/BackDoor/points/default.aspx" runat="server"><i class="fa fa-circle-o"></i> Players Points</a></li>


            </li>
           </ul>
        </li>

For example Im using the admin lte theme and it does it the following way for main items and then sub menu items

 <li class="treeview active">
          <a href="#">
            <i class="fa fa-folder"></i> <span>Examples</span>
            <i class="fa fa-angle-left pull-right"></i>
          </a>
          <ul class="treeview-menu">
            <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
            <li><a href="profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
            <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
            <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
            <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
            <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
            <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
            <li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
          </ul>
        </li>

score 1 · Accepted Answer · answered Nov 12 '15 at 12:54

If you are talking about serverside you should to add property to your control and method to detect if it's specified page

    public string CurrentPageName { get; set; }

    public string IsCurrentPage(string itemName)
    {
        return CurrentPageName == itemName ? "class='active'" : string.Empty;
    }

and on the page declare control in such way

    <uc:YourMenuControl runat="server" CurrentPageName="Your Current Page" />

and update your li items like

    <li <%= IsCurrentPage("500.html")  %>><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
    <li <%= IsCurrentPage("blank.html")  %>><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>

if you can use server controls you can make it in slightly different way, setup your li items in collection and add it to your server control

    <ul class="treeview-menu" runat="server" id="myMenu"></ul>

control codebehind, here we set value for CurrentPageName in codebehind

    protected void Page_Load(object sender, EventArgs e)
    {
        CurrentPageName = "blank.html";
        var menuItemsList = new Dictionary<string, string>()
        {
            {"invoice.html", " Lockscreen"},
            {"lockscreen.html", " Lockscreen"},
            {"blank.html", " Blank"}
        };

        foreach (var item in menuItemsList)
        {
            HtmlGenericControl li = new HtmlGenericControl("li");
            HtmlGenericControl ianchor = new HtmlGenericControl("a");
            ianchor.Attributes.Add("href", item.Key);
            if (CurrentPageName == item.Key)
            {
                ianchor.Attributes.Add("class", "active");
            }

            HtmlGenericControl i = new HtmlGenericControl("i");
            i.Attributes.Add("class", "fa fa-circle-o");
            ianchor.InnerText = item.Value;
            ianchor.Controls.AddAt(0, i);
            li.Controls.Add(ianchor);
            myMenu.Controls.Add(li);
        }
    }

thank you for the very in depth answer ;) i will be implmenenting it thanks mate — c-sharp-and-swiftui-devni, Nov 12 '15 at 13:21
question the mymenu reference is that to what as I am creating the menu items with lisa ? — c-sharp-and-swiftui-devni, Nov 12 '15 at 13:22

score 1 · Answer 2 · answered Aug 19 '17 at 10:21

Find Page Title at the top of your *.aspx page. Replace here - Page.Title=="About". You have to set your page title instead of About.

<li class="<%:Page.Title=="About"?"active":""%>">
    <a runat="server" href="~/About.aspx">About</a>
</li>

It's Simple ternary operator. Represents if Page.Title is equal to About then class = active else class = empty.

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

You can set the StaticSelectedStyle or loop through all the menu items to find the menu item containing the URL and make the menu items selected property to true as suggested in this SO Post

edited May 23 '17 at 12:15

Community

1
1

answered Nov 12 '15 at 12:24

Kumar C

100
2
13

How do I make current menu item active in asp.net webforms

3 Answers3