Search code examples
asp.netcssdynamic-css

How to change CSS class of a HTML page element using ASP.NET?

I have several <li> elements with different id's on ASP.NET page:

<li id="li1" class="class1">
<li id="li2" class="class1">
<li id="li3" class="class1">

and can change their class using JavaScript like this:

li1.className="class2"

But is there a way to change <li> element class using ASP.NET? It could be something like:

WebControl control = (WebControl)FindControl("li1");
control.CssClass="class2";

But FindControl() doesn't work as I expected. Any suggestions?

Thanks in advance!

Solution

  • The FindControl method searches for server controls. That is, it looks for controls with the attribute "runat" set to "server", as in:

    <li runat="server ... ></li>

    Because your <li> tags are not server controls, FindControl cannot find them. You can add the "runat" attribute to these controls or use ClientScript.RegisterStartupScript to include some client side script to manipulate the class, e.g.

    System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script language=\"javascript\">");
sb.Append("document.getElementById(\"li1\").className=\"newClass\";")
sb.Append("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "MyScript", sb.ToString());