CODEWITHSUNDEEP
c#cssasp.netwebformswebusercontrol
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

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

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>

Upvotes: 0

Views: 6531

Answers (3)

Shafikul Islam
Shafikul Islam

Reputation: 359

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.

Upvotes: 1

makison
makison

Reputation: 383

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

Upvotes: 1

Kumar C
Kumar C

Reputation: 132

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

Upvotes: 0

Related Questions