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>

Answer 1

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