¿Cómo cambiar la clase CSS de un elemento de página HTML usando ASP.NET?

Question

Tengo varios elementos <li> con diferentes identificaciones en la página ASP.NET:

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

y pueden cambiar su clase usando JavaScript de esta manera:

li1.className="class2"

Pero, ¿hay alguna manera de cambiar la clase del elemento <li> usando ASP.NET?Podría ser algo como:

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

Pero FindControl() no funciona como esperaba.¿Alguna sugerencia?

¡Gracias de antemano!

Answer 1

El método FindControl busca controles de servidor.Es decir, busca controles con el atributo "runat" establecido en "servidor", como en:

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

Debido a que sus etiquetas <li> no son controles de servidor, FindControl no puede encontrarlas.Puede agregar el atributo "runat" a estos controles o usar ClientScript.RegisterStartupScript para incluir algún script del lado del cliente para manipular la clase, p.e.

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 2

Agregarrunat="server" en tu página HTML

luego use la propiedad de atributo en su página asp.Net como esta

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

Answer 3

FindControl funcionará si incluye runat="server" en el <li>

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

De lo contrario, el código del lado del servidor no podrá "verlo".

Answer 4

Esto encontrará el elemento li y establecerá una clase CSS en él.

using System.Web.UI.HtmlControls;

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

Recuerda agregar tu runat="server" atributo como lo mencionan otros.

Answer 5

debes configurar runat="server" como:

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

Answer 6

Intente esto si desea aplicar estilo:

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

Para CSS, puedes probar la siguiente sintaxis:

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

Answer 7

Leaf Dev proporcionó la solución para esto, pero en lugar de "ctl" debes insertar "Master".

Me funciona de todos modos:

using System.Web.UI.HtmlControls;

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

Answer 8

También puedes probar esto si quieres agregar algunos estilos:

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