Thay đổi các lớp CSS từ mã

Question

Thật dễ dàng để đặt CssClass trong mã sau, nhưng điều này có nguy cơ ghi đè lên các lớp hiện có.

tôi cần phải đặt yếu tố nhất định để ReadOnly = true; và tôi muốn áp dụng một phong cách như một gợi ý trực quan rằng mục không thể thay đổi ... đủ dễ dàng:

.CssClass += " ReadOnlyStyle"; 

Nhưng vào những thời điểm tôi sẽ cũng cần thay đổi cùng một thành phần thành ReadOnly = false; có nghĩa là tôi sẽ cần xóa lớp CSS mà tôi đã đặt mà không xóa bất kỳ kiểu nào khác mà tôi có thể đã gán.

Cách tốt nhất để làm điều này là gì?

Answer 1

Tôi đã lấy AnthonyWJones mã ban đầu và sửa đổi nó để nó hoạt động không có vấn đề gì kịch bản:

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

Bạn có thể tạo các lớp tùy chỉnh của riêng mình không? Xuất phát từ nút ASP.NET và thêm một sự thích hợp cho chỉ đọc. Một nơi nào đó ... có lẽ trong OnPreRender, bạn có thể kiểm tra thuộc tính mới và thiết lập (hoặc không được thiết lập) thuộc tính CSSClass cho phù hợp.

Answer 3

Trong C# 3, bạn có thể thêm một số phương pháp mở rộng.

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

Cách sử dụng: -

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

Lưu ý RemoveCssClass được thiết kế để loại bỏ chỉ những lớp học thêm bởi AddCssClass và có giới hạn đó mà 2 tên lớp bổ sung thêm tên ngắn không phải phù hợp chính xác bắt đầu tên dài nhất. Ví dụ: Nếu bạn đã thêm "test" và "test2", bạn không thể xóa kiểm tra mà không làm hỏng CssClass. Điều này có thể được cải thiện với RegEx bởi tôi mong đợi ở trên là đủ cho nhu cầu của bạn.

Lưu ý nếu bạn không có C# 3 thì hãy xóa từ khóa this khỏi thông số đầu tiên và sử dụng các phương pháp tĩnh theo cách thông thường.

Answer 4

phiên bản này kiểm tra để chắc chắn rằng các lớp học nhất định chưa được bổ sung trước khi thêm nó.

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

tôi đã thực hiện một phiên bản dành cho 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(); 
     } 
    } 

Được sử dụng như:

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

Cái này sẽ chỉ làm tăng thêm một lớp nếu nó chưa có. Nó cũng sẽ xóa tất cả các phiên bản của một lớp (nếu vì một lý do nào đó, có nhiều trường hợp trong đó)

Answer 6

Pure .NET 2.0 (Không có phần mở rộng! Không LINQ! Không RegEx! Không cần lớp WebControl không cần thiết!). Những phương pháp này khá chung chung không chỉ được sử dụng cho các lớp CSS.

Ngoài ra, hãy xem CssClassManipulator của tôi.

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

Có liên quan ... nếu bạn chỉ muốn bật một Lớp dựa trên điều kiện ...

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