Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 820
  • Last Modified:

How do I Keep my top navigational menu item highlighted dynamically using code behind in c#

this is probably ridiculous but here goes...
I have a C# asp site I am working on that uses a master page to wrap my header, top navigation and footer within my container.

you can view my site at the following link http://www.devplcellc.com/

My top navigation currently is  a static html/css menu and I would like to have the selected link remain highlighted dynamically.  I have the html code placed within a web user control.  I am confused as to what code I need to insert in the code behind to have the link stay on it's a:active state once it has been clicked.  

I am relatively new when it comes to working with server side c# logic (less than a year) in ascx.cs files and I am not comfortable writing c# logic off the top of my head.  However, once I see code examples I can almost always interpret the logic correctly.  Can someone please give me an example of how I mark up my href''s to include an id as well as the proper code behind? Any help would be greatly appreciated.

#note
I don't believe I can go the easier route and assign classes to the body tags on each asp page because they inherit off of master page.

example .ascx file for my top navigation

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="topNav.ascx.cs" Inherits="controls_topNav" %>

<div id="DivTopNav">
        <div id="DivTopNavMenu">
            <a href="/service/Default.aspx">SERVICE</a>
            <a id="a:active" href="/remanufacturing/Default.aspx">REMANUFACTURE</a>
            <a href="/packages/Default.aspx">PACKAGES</a>
            <a href="/aboutUs/Default.aspx">ABOUT US</a>
            <a href="/contactUs/Default.aspx">CONTACT US</a>
            <a href="/employment/Default.aspx">CAREERS</a>  
        </div>      
   </div>

my CSS

#DivTopNav
{
    clear:both;
    background: #000000;
    background-image: url( "/images/topNav.png" );
    background-repeat: no-repeat;
    padding: 0px 0px 0px 0px;
    width: 977px;
    height: 65px;
    border-bottom: 2px solid red;
    color: #ffffff;
    text-align:center;
}

#DivTopNav #DivTopNavMenu
{
    padding: 11px 10px 0px 10px;
    font-size: 14px;
    font-weight:bold;
    text-transform: uppercase;
    text-align:right;
}

#DivTopNav #DivTopNavMenu a, #DivTopNav #DivTopNavMenu a:visited
{
    padding: 0px 15px 0px 15px;
    color:#ffffff;
    text-decoration:none;
      font-family:"Times New Roman", Times, serif;
}

#DivTopNav #DivTopNavMenu a:hover,  #DivTopNav #DivTopNavMenu a:active
{
    color:#ee2229;
    text-decoration:none;
}
0
randogg65
Asked:
randogg65
  • 5
  • 5
1 Solution
 
jinjieCommented:
You can retrieve the current url that is displaying. From there, you can determine which page and you can set CSS style on that link. Provided that you have made the links to runat="server"
0
 
randogg65Author Commented:
Thanks for the quick response.  

I am not familiar with that method. Could you please provide an example?
0
 
jinjieCommented:
I do not have an exact sample for you at this moment. But I have done something which is quite similar to this. Except just that I get the directory then the filename. I have provided you bits and pieces of my previous work that does that. I hope it helps
This is roughly how your links should look like in your aspx page. This make you able to set the class for the link dynamically on your codebehind file :
 
<a runat="server" id="link1" href="link1.aspx">Link1</a>
<a runat="server" id="link2" href="link2.aspx">Link2</a>
<a runat="server" id="link3" href="link3.aspx">Link3</a>
<a runat="server" id="link4" href="link4.aspx">Link4</a>
 
In your .vb file of your masterpage, you should have something similar to this in your page Load :
 
Dim filename As String = System.IO.Path.GetFileName(Request.PhysicalPath)
 
If (filename = "link1.aspx") Then
  link1.Attributes.Add("class", "currentMenu")
ElseIf (filename = "link2.aspx") Then
  link2.Attributes.Add("class", "currentMenu")
End If
 
 
'' remember to define the currentMenu class in your CSS too.. I have not test this out on my local machine. Tell me if it works. :)

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
randogg65Author Commented:
I appreciate your help and I think this is a great starting point however, my asp project is in c#, not vb.  Do you have any examples in c#?
0
 
jinjieCommented:
0
 
randogg65Author Commented:
I converted the code to c#.  when I placed the code directly in my master page's code behind it would not register my id's.  Probably because I am using a web control titled topNav.ascx.  I was able to put your code in the topNav.ascx.cs everything registered correctly.   I loaded everything onto my testing server with no errors however, there is no change.  Could the css class not be registering because I do not have my hrefs inside of a <li> tag? my code is as follows.

topNav.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="topNav.ascx.cs" Inherits="controls_topNav" %>

<div id="DivTopNav">
        <div id="DivTopNavMenu">
            <a runat="server" id="service" href="/service/Default.aspx">SERVICE</a>
            <a runat="server" id="remanufacture" href="/remanufacturing/Default.aspx">REMANUFACTURE</a>
        </div>      
   </div>


code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class controls_topNav : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        {
            string filename = System.IO.Path.GetFileName(Request.PhysicalPath);

            if ((filename == "www.devplcellc.com/service/Default.aspx"))
            {
                service.Attributes.Add("class", "currentMenu");
            }
            else if ((filename == "/remanufacturing/Default.aspx"))
            {
                remanufacture.Attributes.Add("class", "currentMenu");
            }
        }
    }
}

css

#DivTopNav
{
    clear:both;
    background: #000000;
    background-image: url( "/images/topNav.png" );
    background-repeat: no-repeat;
    padding: 0px 0px 0px 0px;
    width: 977px;
    height: 65px;
    border-bottom: 2px solid red;
    color: #ffffff;
    text-align:center;
}

#DivTopNav #DivTopNavMenu
{
    padding: 11px 10px 0px 10px;
    font-size: 14px;
    font-weight:bold;
    text-transform: uppercase;
    text-align:right;
}

#DivTopNav #DivTopNavMenu a, #DivTopNav #DivTopNavMenu a:visited
{
    padding: 0px 15px 0px 15px;
    color:#ffffff;
    text-decoration:none;
      font-family:"Times New Roman", Times, serif;
}

#DivTopNav #DivTopNavMenu a:hover,  #DivTopNav #DivTopNavMenu a:active
{
    color:#ee2229;
    text-decoration:none;
}

.currentMenu
{
      padding: 0px 15px 0px 15px;
    color:#ee2229;
    text-decoration:none;
      font-family:"Times New Roman", Times, serif;
      }
      

a.currentMenu:link
{
      padding: 0px 15px 0px 15px;
    color:#ee2229;
    text-decoration:none;
      font-family:"Times New Roman", Times, serif;
 }
a.currentMenu:visited
{
      padding: 0px 15px 0px 15px;
    color:#ee2229;
    text-decoration:none;
      font-family:"Times New Roman", Times, serif;
}
a.currentMenu:hover
{
      padding: 0px 15px 0px 15px;
    color:#ee2229;
    text-decoration:none;
      font-family:"Times New Roman", Times, serif;
 }
a.currentMenu:active
{
      padding: 0px 15px 0px 15px;
    color:#ee2229;
    text-decoration:none;
      font-family:"Times New Roman", Times, serif;
}


This is so frustrating.  I feel like there has to be an easier way of accomplishing this.  Thanks in advance.
0
 
jinjieCommented:
ok.. since you have already placed your files in the different directories, so you just need to get which directory the url is in then set the currentMenu class to the respective link.
 string url = HttpContext.Current.Request.ServerVariables("URL");
      string url_split = url.Split((char)"/")(2);
 
            if ((url_split == "service"))
            {
                service.Attributes.Add("class", "currentMenu");
            }
            else if ((url_split == "remanufacturing"))
            {
                remanufacture.Attributes.Add("class", "currentMenu");
            }

Open in new window

0
 
randogg65Author Commented:
I apologize because this seems to be way over my head.  I find working with asp and object oriented programming extremely fascinating yet, I often fail to wrap my head around it.

the code example you provided is giving me a few problems.  


string url = HttpContext.Current.Request.ServerVariables("URL");
 
//I get a non invokable member cannot be used like a method. I changed it to 
 
string url = HttpContext.Current.Request.ServerVariables["URL"]; 
 
//and it took it.
 
string url_split = url.Split((char)"/")(2);
 
//i get cannot convert type 'string' to 'char'

Open in new window

0
 
jinjieCommented:
i dont write my codes in c#. so, i apologize for such mistakes.


//try changing it to
 
string url_split = url.Split('/')[2];
 
// i hope it works this time. if it doesn't, read up some split examples

Open in new window

0
 
randogg65Author Commented:
Still a no go.

I don't show any errors however, I am getting a runtime error when I test it on the development site  when I try and debug it I get a

A first chance exception of type 'System.NullReferenceException' occurred in App_Web_dbmyb3nd.dll

for this line of code.

string url_split = url.Split('/')[2];

is there a way to do this using javaScript?
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now