Enhance Your ASP.NET Website with Dynamic Link Styles

Question

Enhance Your ASP.NET Website with Dynamic Link Styles

Having some trouble with my main menu on my ASP.NET website. I'm looking to have the selected link change its color to black and stay that way until a different link is clicked.

In simpler terms, I want the selected link to be highlighted.

I've managed to make it work using JavaScript, but the issue is that the style doesn't persist after a page reload (or at least it seems so).

This is 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>

While this script changes the class name when clicked, it doesn't maintain that state upon loading a new page.

Does anyone have a workaround for this? :)

Thank you in advance,

Sincerely,

Bo

asp.net javascript jquery css

Answer 1

Answer №1

My go-to choice for creating menus is the ASP:Menu control. It offers a great level of control over menu items.

One useful method that I often include in my masterpage is one that runs during the initial page load. This method goes through all the menu items in the control and selects the item corresponding 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 some examples of menu items I use in my ASP menu control. Take note that I utilize the Value attribute to help identify which menu item corresponds 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

My go-to choice for creating menus is the ASP:Menu control. It offers a great level of control over menu items.

One useful method that I often include in my masterpage is one that runs during the initial page load. This method goes through all the menu items in the control and selects the item corresponding 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 some examples of menu items I use in my ASP menu control. Take note that I utilize the Value attribute to help identify which menu item corresponds 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 3

Answer №2

One way to maintain the value of your "last" variable between function calls is by making it a static member of your function. You can learn how to do this by following this guide. This approach ensures that the value stays intact even when the function is called multiple times. It's worth experimenting to see if the value persists after page reloads.

If this method doesn't work for retaining the value, you may need to find a way to instruct ASP to store and recall the variable. As for providing guidance on that front, I'm afraid I won't be of much help.

Answer 4

One way to maintain the value of your "last" variable between function calls is by making it a static member of your function. You can learn how to do this by following this guide. This approach ensures that the value stays intact even when the function is called multiple times. It's worth experimenting to see if the value persists after page reloads.

If this method doesn't work for retaining the value, you may need to find a way to instruct ASP to store and recall the variable. As for providing guidance on that front, I'm afraid I won't be of much help.

Enhance Your ASP.NET Website with Dynamic Link Styles

Answer №1

Answer №2

Similar questions

Creating a sidebar that extends to the bottom of the webpage using

Making alterations to the bootstrap.scss document

Using jQuery to create a nested table

Is it possible to replicate an HTML table using JavaScript without including the headers?

Incorporating WordPress post identifiers into an enduring collection

Issues with Iframe { height:70%;} in Internet Explorer 8 and Firefox causing display problems

Learning to access a base64 encoded PDF file using JavaScript

Enhance User Experience with jQuery UI Droppable: Customize default elements from a saved list and expand drop zones for added functionality

When creating routes in Express 4.* using node.js, it is essential to use the root directory

Issues with the proper functionality of the .ajax() method in Django

Having trouble with the Express.js app.post request functionality

Why is my JavaScript code functioning properly on jsfiddle but failing to work when run locally?

Is there a noticeable distinction or significant benefit between using auth.signOut() and signOut(auth)?

Attempting to bring in HTML through a helper, but Rails doesn't seem too thrilled about it

Monitor $localStorage for any modifications

Steps for downloading a file attached to a gridview

It appears that my array is not being properly populated by my callback functions

Executing window.open from Html.Actionlink in ASP.NET MVC 4

What factors should be taken into account when running a process from an ASP.NET application directory?

What could be causing the error message to appear stating that each list item must have a unique key when utilizing react-bootstrap in Nextjs?