How to programmatically add active style to header control links using C#?

Question

I have an unordered list for my navigation in my header control. The header control is called on each of my other pages.

<ul>
    <li class="active">Home</li>
    <li>About</li>
    <li>Store</li>
</ul>

What is the best way to programmatically change the active class to the About page when I load it?

I'm using C# for this project.

What type of project it is - WebForms, MVC, WebBrowser, some command line tool that greps HTML...? — Alexei Levenkov
– Alexei Levenkov, Commented Aug 28, 2013 at 16:41

Jonathan Wood · Accepted Answer · 2013-08-28 19:54:39Z

3

Just add a public property to the user control.

I assume this data is in a data structure when your page is initialized. The property type should be of the appropriate type to identify that data. Then when the page is rendered, the control should take the value of the property into consideration for how the data is rendered.

This might involved setting runat=server for each list item and then setting the CssClass property for the appropriate one. I personally took a different approach, writing the raw code to generate the HTML. I can think of other options as well.

An example of the first approach might look something like this (untested):

ascx

<ul>
    <li id="HomeList" runat="server">Home</li>
    <li id="AboutList" runat="server">About</li>
    <li id="StoreList" runat="server">Store</li>
</ul>

User Control cs

public string ActiveItem { get; set; }

protected void Page_PreRender(object sender, EventArgs e)
{
    if (ActiveItem != null)
    {
        if (ActiveItem == "Home")
            HomeList.CssClass = "active";
        if (ActiveItem == "About")
            HomeAbout.CssClass = "active";
        if (ActiveItem == "Store")
            HomeStore.CssClass = "active";
    }
}

Page cs

UserControl1.ActiveItem = "Home";

Getting much more specific would probably require more information about those data structures and the inner working of your user control.

edited Aug 28, 2013 at 19:54

answered Aug 28, 2013 at 17:02

Jonathan Wood

68.1k86 gold badges308 silver badges542 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Trey Copeland Over a year ago

Jonathan, can you please provide an example?

Jonathan Wood Over a year ago

I've updated my answer but don't understand why you are being so tight lipped about the details of your data and control.

Trey Copeland Over a year ago

Jonathan, what if the header control is included on the Default.aspx? I can't access HomeList from Default.cs.

Jonathan Wood Over a year ago

No, you would only access it from your user control. As I explained in my original answer, you need to add a public property to your user control, which should handle so it sets the CssClass of the appropriate item. Default.aspx will just access that public property.

Collectives™ on Stack Overflow

How to programmatically add active style to header control links using C#?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related