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

dynamic-css

Question

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

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

y puede cambiar su clase usando JavaScript así:

li1.className="class2"

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

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

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

¡Gracias por adelantado!

Answer 1

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

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

Answer 2

debes establecer runat = "server" como:

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

Answer 3

El método FindControl busca los controles del 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 del 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, por ej.

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

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 puede "verlo".

Answer 5

Agregue runat="server" en su página HTML

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

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

Answer 6

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

Recuerde agregar su atributo runat="server" como lo mencionaron otros.

Answer 7

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

A mí me funciona de todos modos:

using System.Web.UI.HtmlControls;
HtmlGenericControl liItem = (HtmlGenericControl) ctl.FindControl("liItemID");
liItem.Attributes.Add("class", "someCssClass");

Answer 8

Por favor intente esto si quiere aplicar el estilo:

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

Para CSS, puede probar la siguiente sintaxis:

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