Active link style in ASP.NET

Question

Hi StackOverflow,

I'm having some trouble with my main menu on my ASP.NET website. What I want is, when a user clicks on a link, it should change it's color to black and remain black until the user clicks on the other links.

In other words: I want to highlight the selected link.

So far I've got it working using some workaround JavaScript (should consider using jQuery instead I think), but the problem is, that the style dosn't remain on page postback (or so it seems..)

My current javascript:

<script type="text/javascript">
    var last = "none";
    function LinkSelector(link) {
        if (last != "none") {
            document.getElementById(last).className = "NormalLink";
        }
        document.getElementById(link).className = "ActiveLink";
        last = link;
    }
</script>

As I wrote, it sure changes the class name when clicked, but dosn't remain that way when the new page is loaded.

Anyone got a workaround on this? :)

Thanks in advance.

All the best,

Bo

Answer 1

Typically, I'll use the ASP:Menu control. It provides a decent amount of control over the menu items in it.

For example, here's a generic method that I dump in a masterpage and run during the initial page hit. This method loops over the menu items in the menu control, and selects the menu item that corresponds to the current URL.

protected void Page_Load(object sender, EventArgs e) {
        if (!Page.IsPostBack) {
            SelectMenuItem();
        }
    }

    private void SelectMenuItem() {
            string rawurl = Request.RawUrl.ToLower();

            rawurl = rawurl.Substring(rawurl.LastIndexOf("/") + 1);
            if (rawurl.IndexOf("?") >= 0)
                rawurl = rawurl.Substring(0, rawurl.IndexOf("?"));

            foreach (MenuItem mi in mnuMain.Items) {
                if (mi.ChildItems.Count == 0) {
                    if (mi.Value == rawurl) {
                        mi.Selected = true;
                        break;
                    }
                }
                else {
                    foreach (MenuItem cmi in mi.ChildItems) {
                        if (cmi.Value == rawurl) {
                            mi.Selected = true;
                            break;
                        }
                    }
                    if (mi.Selected)
                        break;
                }
            }
        }

Here are a few of the menu items I have in my asp menu control. Note that I use the Value attribute to help me indicate which menu item pertains to the requested URL in the method above.

<Items>
  <asp:MenuItem Text="Forms" Value="authorization">
    <asp:MenuItem Text="New Authorization Form" Value="createauthform.aspx" NavigateUrl="~/CreateAuthForm.aspx"></asp:MenuItem>
    <asp:MenuItem Text="Manage My Authorization Forms" Value="myrequests.aspx" NavigateUrl="~/MyRequests.aspx"></asp:MenuItem>
    <asp:MenuItem Text="Audit Attendance Form" Value="auditform.aspx" NavigateUrl="~/AuditForm.aspx"></asp:MenuItem>
    <asp:MenuItem Text="Tax Determination Statement" Value="taxstatement.aspx"  NavigateUrl="~/TaxStatement.aspx"></asp:MenuItem>
  </asp:MenuItem>
</Items>

Answer 2

Consider implementing your "last" variable as a static member of your function, here's how it's done. That way its value will be retained between function calls. I am not sure if it's retained between page loads, but you can test it.

If not, you'll have to somehow instruct ASP to remember the value. Regarding that, I'm as useful as a lump weight.