Click here to Skip to main content
15,905,558 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have created my menu by using div and ul and want to make them active on the basic of page name from code behind, here is my html.
----------------------------------------------------
XML
<ul class="nav">
                            <li class="nav_a"><a class="nav_active" href="Index.aspx">Home</a></li>
                            <li class="nav_a">|</li>
                            <li class="nav_a"><a class="nav_a1" href="About.aspx">About Us</a></li>
                            <li class="nav_a">|</li>
                            <li class="nav_a"><a class="nav_a1" href="Services.aspx">Services</a></li>
                            <!--<li class="nav_a">|</li>
                            <li class="nav_a"><a class="nav_a1" href="fees.html">Fees</a></li>-->
                            <li class="nav_a">|</li>
                            <li class="nav_a"><a class="nav_a1" href="Contact_Us.aspx">Contact Us</a></li>
                            <asp:Literal ID="ltTopMenu" runat="server"></asp:Literal>
                        </ul>
Posted
Updated 23-Mar-18 12:56pm

For highlighting the menu from code behind first you need to change your html anchor tag to server side anchor tag. You can do it by adding runat="server" attribute to your anchor tag.

Eg :-
ASP.NET
<ul><li class="nav_a"><a class="nav_active" href="Index.aspx" id="href1" runat="server">Home</a></li></ul>


then access this anchor tag from code behind and change the class.

C#
href1.Attributes.Add("class", "new-class");


before that, crete a new class for highlighting the menu.

Good luck.
 
Share this answer
 
Refer - How to highlight active page in a masterpage menu?[^].
Quote:
There are many ways to do this. There are some easy and some ugly hacky ones:

Solution 1:
Use a Menu Control. The standard .NET Menu Control has an easy solution to do this. This is the cleanest and fastest solution in my opinion. Have a look at this post. Maby it'll help you if you choose this solution.

Solution 2:
You coud use some sort of javascript to highlight the current item. jQuery would make that easier if you dont want to write everything by yourself. For this solution have a look at this page. It's outdated but still effective.

Solution 3:
This is kinda ugly solution and you can do that in many different ways: You could change the <a> elements to HyperLink controls and set some sort of session or cookie when you click on them. When set you could change the style based on the value the cookie has.

There are even more ways you could solve this but I think the first two solutions will help you.

For Solution 3, you can refer the second post - Highlighting active link when using Masterpage[^].
Quote:
Each Hyperlink control has an id. Style the link with that id on the page.

E.g., for the page linked to by control id="HyperLink1", create a style on that page that gives a#HyperLink1, say, bold red text. Repeat on the other pages, creating styles on those pages that style the id of their hyperlink.

This doesn't rely on knowing if the link is active, simply on knowing what page you are on, and which link in the menu is for that page.
 
Share this answer
 
How to set active class to the current page link if your navigation menu is in a master page ?

Assuming that your menu structure is as shown below in the (Master.aspx) file :
HTML
<ul>    
     <li><a href="Dash.aspx">Dashboard</a></li>    
     <li><a href="Tests.aspx">Test</a></li>    
     <li><a href="Report.aspx">Report</a></li>    
</ul>



Start by assigning a unique (id) to each element and add the key (runat="server") to each. so your markup would look like this

ASP.NET
<ul>      
     <li id="dashlink" runat="server"><a href="Dash.aspx">Dashboard</a></li>      
     <li id="testslink" runat="server"><a href="Tests.aspx">Test</a></li>      
     <li id="reportlink" runat="server"><a href="Report.aspx">Report</a></li>      
</ul>



Finally in the code-behinde of the Master Page, add the following to the (Page_load) function

C#
protected void Page_Load(object sender, EventArgs e)  
{  
  
    String activepage = Request.RawUrl;  
    if (activepage.Contains("Dash.aspx"))  
    {  
        dashlink.Attributes.Add("class", "active");  
    }  
    else if (activepage.Contains("Tests.aspx"))  
    {  
       testslink.Attributes.Add("class", "active");  
    }  
    else if (activepage.Contains("Report.aspx"))  
    {  
       reportlink.Attributes.Add("class", "active");  
    }  
  
}


Enjoy!
 
Share this answer
 
Comments
CHill60 24-Mar-18 12:56pm    
I doubt the OP will enjoy a solution that appears 4 and a half years after they needed it
easye77 28-Feb-20 12:33pm    
No, but others that search and are looking for answers will enjoy it. Did you forget other people besides the OP exist are looking for solutions as well? Please think of that next time before replying and sounding like a massive jerk bud.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900