C# – How to change HTML elements attributes

My master page contains a list as shown here. What I’d like to do though, is add the “class=active” attribute to the list li thats currently active but I have no idea how to do this. I know that the code goes in the aspx page’s page_load event, but no idea how to access the li I need to add the attribute. Please enlighten me. Many thanks.

<div id="menu">
  <ul id="nav">
    <li class="forcePadding"><img src="css/site-style-images/menu_corner_right.jpg" /></li>               
    <li id="screenshots"><a href="screenshots.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Screenshots">Screenshots</a></li>
    <li id="future"><a href="future.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Future">Future</a></li>
    <li id="news"><a href="news.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="News">News</a></li>
    <li id="download"><a href="download.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Download">Download</a></li>
    <li id="home"><a href="index.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Home">Home</a></li>
    <li class="forcePadding"><img src="css/site-style-images/menu_corner_left.jpg" /></li>
  </ul>
</div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In order to access these controls from the server-side, you need to make them runat=”server”

<ul id="nav" runat="server">
  <li class="forcePadding"><img src="css/site-style-images/menu_corner_right.jpg" /></li>               
  <li id="screenshots"><a href="screenshots.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Screenshots">Screenshots</a></li>
  <li id="future"><a href="future.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Future">Future</a></li>
  <li id="news"><a href="news.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="News">News</a></li>
  <li id="download"><a href="download.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Download">Download</a></li>
  <li id="home"><a href="index.aspx" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="Home">Home</a></li>
  <li class="forcePadding"><img src="css/site-style-images/menu_corner_left.jpg" /></li>
</ul>

in the code-behind:

foreach(Control ctrl in nav.controls)
{
   if(!ctrl is HtmlAnchor)
   {
      string url = ((HtmlAnchor)ctrl).Href;
      if(url == GetCurrentPage())  // <-- you'd need to write that
         ctrl.Parent.Attributes.Add("class", "active");
   }
}

Method 2

The code below can be used to find a named control anywhere within the control hierarchy:

public static Control FindControlRecursive(Control rootControl, string id)
{
    if (rootControl != null)
    {
        if (rootControl.ID == id)
        {
            return rootControl;
        }

        for (int i = 0; i < rootControl.Controls.Count; i++)
        {
            Control child;

            if ((child = FindControlRecursive(rootControl.Controls[i], id)) != null)
            {
                return child;
            }
        }
    }

    return null;
}

So you could do something like:

Control foundControl= FindControlRecursive(Page.Master, "theIdOfTheControlYouWantToFind");
((HtmlControl)foundControl).Attributes.Add("class", "active");

Forgot to mention previously, that you do need runat=”server” on any control you want to be able to find in this way =)

Method 3

Add runat=”server” on the li tags in the masterpage then add this to the appropriate page_load event to add the ‘active’ class to the li in the masterpage

HtmlGenericControl li = HtmlGenericControl)Page.Master.FindControl(“screenshots”);
li.Attributes.Add(“class”, “active”);

Method 4

You could register a client script like this:

(set id to the id of the li that you want to set to active)

ClientScript.RegisterStartupScript(this.GetType(), "setActiveLI", "document.getElementById(""+id+"").setAttribute("class", "active");", true);

This generates a JavaScript call on the page near the bottom after elements have already been rendered.

Method 5

All the parts have already been provided in previous answers, but to put the whole thing together, you’ll need to:

public GenericHtmlControl Li1
{
    get
    {
        return this.LiWhatever;
    }
}

MasterPage2 asd = ((MasterPage2)Page.Master).Li1.Attributes.Add("class", "bla");

#navbar a:hover,
  .articles #navbar #articles a,
  .topics #navbar #topics a,
  .about #navbar #about a,
  .contact #navbar #contact a,
  .contribute #navbar #contribute a,
  .feed #navbar #feed a {
 background: url(/pix/navbarlinkbg.gif) top left repeat-x; color: #555;
}

....

<body class="articles" onload="">

<ul id="navbar">
  <li id="articles"><a href="/articles/" rel="nofollow noreferrer noopener" title="Articles">Articles</a></li>
  <li id="topics"><a href="/topics/" rel="nofollow noreferrer noopener" title="Topics">Topics</a></li>
  <li id="about"><a href="/about/" rel="nofollow noreferrer noopener" title="About">About</a></li>
  <li id="contact"><a href="/contact/" rel="nofollow noreferrer noopener" title="Contact">Contact</a></li>
  <li id="contribute"><a href="/contribute/" rel="nofollow noreferrer noopener" title="Contribute">Contribute</a></li>
  <li id="feed"><a href="/feed/" rel="nofollow noreferrer noopener" title="Feed">Feed</a></li>
</ul>

((HtmlControl)this.Master.FindControl("dpohome1")).Attributes.Add("class", "on");