Ändern Sie CSS-Klassen von Code

Question

Es ist einfach, CssClass in den Code-Behind einzustellen, aber das läuft Gefahr, vorhandene Klassen zu überschreiben.

brauche ich bestimmte Elemente ReadOnly = true; zu setzen, und ich möchte einen Stil als visueller Hinweis anzuwenden, dass das Element nicht geändert werden kann ... einfach genug:

.CssClass += " ReadOnlyStyle"; 

Aber manchmal werde ich Auch müssen das gleiche Element zu ReadOnly = false; ändern, was bedeutet, dass ich die CSS-Klasse entfernen muss, die ich festgelegt habe, ohne andere Stile zu entfernen, die ich möglicherweise zugewiesen habe.

Was ist der beste Weg, dies zu tun?

Answer 1

Ich habe AnthonyWJones ursprünglichen Code genommen und geändert, so dass es ganz gleich funktioniert, welches Szenario:

static class WebControlsExtensions 
    { 
     public static void AddCssClass(this WebControl control, string cssClass) 
     { 
      List<string> classes = control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries).ToList(); 

      classes.Add(cssClass); 

      control.CssClass = classes.ToDelimitedString(" "); 
     } 

     public static void RemoveCssClass(this WebControl control, string cssClass) 
     { 
      List<string> classes = control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries).ToList(); 

      classes.Remove(cssClass); 

      control.CssClass = classes.ToDelimitedString(" "); 
     } 
    } 

    static class StringExtensions 
    { 
     public static string ToDelimitedString(this IEnumerable<string> list, string delimiter) 
     { 
      StringBuilder sb = new StringBuilder(); 
      foreach (string item in list) 
      { 
       if (sb.Length > 0) 
        sb.Append(delimiter); 

       sb.Append(item); 
      } 

      return sb.ToString(); 
     } 
    } 

Answer 2

Können Sie Ihre eigenen benutzerdefinierten Klassen erstellen? Leiten Sie von der ASP.NET-Schaltfläche ab und fügen Sie eine Eigenschaft für Nur Lesen hinzu. Irgendwo ... wahrscheinlich können Sie im OnPreRender die neue Eigenschaft überprüfen und die CSSClass-Eigenschaft entsprechend setzen (oder nicht setzen).

Answer 3

In C# 3 können Sie einige Erweiterungsmethoden hinzufügen.

static class WebControlsExtensions 
{ 
    public static void AddCssClass (this WebControl control, string cssClass) 
    { 
     control.CssClass += " " + cssClass; 
    } 
    public static void RemoveCssClass (this WebControl control, string cssClass) 
    { 
     control.CssClass = control.CssClass.replace(" " + cssClass, ""); 
    } 
} 

Verbrauch: -

ctl.AddCssClass("ReadOnly"); 
ctl.RemoveCssClass("ReadOnly"); 

Notiere die RemoveCssClass ist nur für diese Klassen von AddCssClass hinzugefügt zu entfernen und hat die Einschränkung, dass dort, wo zwei zusätzliche Klassennamen hinzugefügt wird, der kürzeste Name sollte nicht genau übereinstimmen, die Beginn des längsten Namens. Wenn Sie beispielsweise "test" und "test2" hinzugefügt haben, können Sie den Test nicht entfernen, ohne die CssClass zu beschädigen. Dies könnte mit RegEx verbessert werden, da ich davon ausgehe, dass das oben genannte für Ihre Bedürfnisse angemessen ist.

Hinweis: Wenn Sie C# 3 nicht haben, entfernen Sie das Schlüsselwort this aus dem ersten Parameter und verwenden Sie die statischen Methoden auf die herkömmliche Weise.

Answer 4

Diese Version überprüft die gegebene Klasse um sicherzustellen, dass nicht bereits vor dem Hinzufügen hinzugefügt.

public static void CssAddClass(this WebControl control, string className) 
{ 
    var classNames = control.CssClass.Split 
     (new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); 

    if (classNames.Contains(className)) 
    { 
     return; 
    } 

    control.CssClass = string.Concat 
     (classNames.Select(name => name + " ").ToArray()) + className; 
} 

public static void CssRemoveClass(this WebControl control, string className) 
{ 
    var classNames = from name in control.CssClass. 
         Split(new[] {' '}, StringSplitOptions.RemoveEmptyEntries) 
        where name != className 
        select name + " "; 


    control.CssClass = string.Concat(classNames.ToArray()).TrimEnd(); 
} 

Answer 5

habe ich eine Version für Pre-C# 3:

 public static class WebControlsExtensions 
     { 
      public static void AddCssClass(WebControl control, string cssClass) 
      { 
       string[] cssClasses = control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); 
       List<string> classes = new List<string>(cssClasses); 

       if (!classes.Contains(cssClass)) { 
        classes.Add(cssClass); 
       } 

       control.CssClass = StringExtensions.ToDelimitedString(classes, " "); 
      } 

      public static void RemoveCssClass(WebControl control, string cssClass) 
      { 
       string[] cssClasses = control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); 
       List<string> classes = new List<string>(cssClasses); 

       bool removed = true; 
       while (removed) { 
        removed = classes.Remove(cssClass); 
       } 

       control.CssClass = StringExtensions.ToDelimitedString(classes, " "); 
      } 
    } 
    static class StringExtensions { 
     public static string ToDelimitedString(List<string> list, string delimiter) 
     { 
      StringBuilder sb = new StringBuilder(); 
      foreach (string item in list) { 
       if (sb.Length > 0) 
        sb.Append(delimiter); 

       sb.Append(item); 
      } 

      return sb.ToString(); 
     } 
    } 

wie gebraucht:

WebControlsExtensions.AddCssClass(ctl, "classname"); 
WebControlsExtensions.RemoveCssClass(ctl, "classname"); 

Dieser wird nur eine Klasse hinzufügen, wenn es nicht bereits vorhanden ist. Es werden auch alle Instanzen einer Klasse entfernt (wenn aus irgendeinem Grund mehrere drin sind)

Answer 6

Pure .NET 2.0 (Keine Erweiterungen! Keine LINQ! Keine RegEx! Keine unnötige WebControl-Klasse!). Diese Methoden sind sehr allgemein und können nicht nur für CSS-Klassen verwendet werden.

Schauen Sie sich auch meine CssClassManipulator.

public static string AddCssClass(string classContainer, string className) 
    { 
     if (string.IsNullOrEmpty(classContainer)) return className ?? string.Empty; 
     if (string.IsNullOrEmpty(className)) return classContainer; 

     var classNames = classContainer.Split(new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); 
     if (Array.Exists(classNames, delegate(string s) { return s.Equals(className); })) return classContainer; 

     return classContainer + " " + className; 
    } 

    public static string RemoveCssClass(string classContainer, string className) 
    { 
     if (string.IsNullOrEmpty(classContainer)) return className ?? string.Empty; 
     if (string.IsNullOrEmpty(className)) return classContainer; 

     var classNames = classContainer.Split(new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); 
     int index = Array.FindIndex(classNames, delegate(string s) { return s.Equals(className); }); 
     if (index >= 0) 
     { 
      return string.Join(" ", classNames, 0, index) + 
       ( index + 1 < classNames.Length ? 
        " " + string.Join(" ", classNames, index + 1, classNames.Length - index - 1) 
        : 
        string.Empty ); 
     } 

     return classContainer; 
    } 

    public static string ToggleCssClass(string classContainer, string className) 
    { 
     if (string.IsNullOrEmpty(classContainer)) return className ?? string.Empty; 
     if (string.IsNullOrEmpty(className)) return classContainer; 

     var classNames = classContainer.Split(new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); 

     if (Array.Exists(classNames, delegate(string s) { return s.Equals(className); })) return RemoveCssClass(classContainer, className); 

     return classContainer + " " + className; 
    } 

Answer 7

Verwandte ... wenn Sie nur eine Klasse basierend auf einer Bedingung umschalten möchten ...

bool disable = true;  // this will vary (true/false) based on UI state 

string newClass = disable ? "BtnGray" : "BtnPink"; 

string currentClass = disable ? "BtnPink" : "BtnGray"; 

myButton.CssClass = myButton.CssClass.Replace(currentClass, newClass);