Agregar clase Css adicional programáticamente

Tengo un cuadro de texto con una clase Css llamada 'required'. Cuando un usuario hace clic en un botón, me gustaría agregar una Clase CSS adicional al cuadro de texto llamado 'error' sin eliminar la clase 'requerida'. Quiero lograr esto desde código subyacente.Agregar clase Css adicional programáticamente

Fuente

2011-06-27 Dragan

esto sería mucho más fácil con código del lado del cliente. ¿Hay alguna razón específica para querer hacer esto en el código subyacente? – xanderer

No es tan difícil (desde una perspectiva de desarrollo) desde el código subyacente. Pero tiene razón acerca de que es fácil en el lado del cliente y no requiere un viaje de ida y vuelta al servidor. –

@Ken él quiere hacer esto en clics. – xanderer

Puede establecer la propiedad CssClass del control de cuadro de texto ASP.NET. Para agregar más de una clase CSS de un elemento, solo lo separan con un espacio:

MyTextBox.CssClass = "class1 class2";

Usted puede poner esto en el controlador de eventos OnClick:

<asp:TextBox ID="MyTextBox" runat="server" OnClick="MyTextBox_Click" />

Luego, en código subyacente:

void MyTextBox_Click(Object sender, EventArgs e) { 
    MyTextBox.CssClass = "class1 class2"; 
}

Fuente

2011-06-27 19:36:29

ja, ja, no sabía que pudieras hacer eso. ¿Y qué sucede si quiero eliminar la segunda clase de CSS? MyTextBox.CssClass = "class1"; ?? – Dragan

bien, pero qué pasa si no sé cuál es la otra CssClass. Terminaré con la codificación y daré el back-end a los diseñadores ... en ese caso, tendré que saber cuál es el nombre de CssClass. No prefiero trabajar así porque está codificado. ¿No puedo hacer textbox.cssclas + = "class2"; – Dragan

Sí, simplemente establece la propiedad en la clase individual. Realmente solo está estableciendo un valor de cadena de lo que aparecerá en el atributo de clase para el control. –

Aquí hay una forma de eliminar la clase css utilizando una función. Agregar una clase sería muy similar.

public void RemoveCssClass(string className) 
{ 
    string[] splitClasses = TextButton.CssClass.Split(' '); 
    string separator = ""; 

    foreach (string _class in splitClasses) 
    { 
     if (_class != className) 
     { 
      TextButton.CssClass += separator + _class; 
      separator = " "; 
     } 
    } 

    if (TextButton.CssClass == className) 
     TextButton.CssClass = ""; 
}

Fuente

2011-06-27 19:45:17 webtrifusion

Eso es un código bastante malo. ¿Qué tal algo como var lsc = splitClasses.ToList(); lsc.Remove (className); TextButton.CssCLass = String.Join ("", lsc); – NetMage

Decidí crear métodos de extensión para que WebControl tenga una solución genérica. Aquí está mi código:

public static class WebControlExtensions 
{ 
    public static void AddCssClass(this WebControl control, string cssClass) 
    { 
     if (string.IsNullOrEmpty(control.CssClass)) 
     { 
      control.CssClass = cssClass; 
     } 
     else 
     { 
      string[] cssClasses = control.CssClass.Split(' '); 
      bool classExists = cssClasses.Any(@class => @class == cssClass); 

      if (!classExists) 
      { 
       control.CssClass += " " + cssClass; 
      } 
     } 
    } 

    public static void RemoveCssClass(this WebControl control, string cssClass) 
    { 
     if (!string.IsNullOrEmpty(control.CssClass)) 
     { 
      string[] cssClasses = control.CssClass.Split(' '); 
      control.CssClass = string.Join(" ", cssClasses.Where(@class => @class != cssClass).ToArray()); 
     } 
    } 
}

Fuente

2013-03-07 13:15:51 FSA

Aquí es un simple método de C# para añadir o quitar un CssClass en un WebControl ...

public static void SetOrRemoveCssClass(WebControl control, string className, bool adding) 
    { 
     string[] splitClasses = control.CssClass.Split(' '); 

     bool hasNow = splitClasses.Contains(className); 
     if (adding && !hasNow) 
     { 
      control.CssClass += " " + className; 
     } 
     else if (!adding && hasNow) // remove the CssClass attribute 
     { 
      control.CssClass = control.CssClass.Replace(className, ""); 
     } 
     control.CssClass = control.CssClass.Replace(" "," ").Trim(); 
    }

Fuente

2016-10-04 04:09:11

Agregar clase Css adicional programáticamente

Respuesta

Cuestiones relacionadas