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

Question

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!

Answer 1

Add runat="server" in your HTML page

then use the attribute property in your asp.Net page like this

li1.Attributes["Class"] = "class1";
li2.Attributes["Class"] = "class2";

Answer 2

FindControl will work if you include runat="server" in the <li>

<li id="li1" runat="server">stuff</li>

Otherwise you server side code can't 'see' it.

Answer 3

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());

Answer 4

This will find the li element and set a CSS class on it.

using System.Web.UI.HtmlControls;

HtmlGenericControl liItem = (HtmlGenericControl) ctl.FindControl("liItemID");
liItem.Attributes.Add("class", "someCssClass");

Remember to add your runat="server" attribute as mentioned by others.

Answer 5

you must set runat="server" like:

<li id="li1" runat="server">stuff</li>

Answer 6

Please try this if you want to apply style:

li1.Style.Add("background-color", "black");

For CSS, you can try below syntax :

li1.Attributes.Add("class", "clsItem");

Answer 7

Leaf Dev provided the solution for this, but in the place of "ctl" you need to insert "Master".

It's working for me anyway:

using System.Web.UI.HtmlControls;

HtmlGenericControl liItem = (HtmlGenericControl) ctl.FindControl("liItemID");
liItem.Attributes.Add("class", "someCssClass");

Answer 8

You also can try this too if u want to add some few styles:

li1.Style.add("color","Blue");
li2.Style.add("text-decoration","line-through");