以编程方式添加额外的 Css 类答案

【问题标题】：Add additional Css class programmatically以编程方式添加额外的 Css 类
【发布时间】：2011-09-23 18:51:47
【问题描述】：

我有一个带有名为“必需”的 Css 类的文本框。当用户单击按钮时，我想在名为“错误”的文本框中添加额外的 Css 类，而不删除“必需”类。我想通过代码隐藏来完成这个。

【问题讨论】：

使用客户端代码会容易得多。是否有特定的原因要在代码隐藏中执行此操作？
从代码隐藏来看（从开发的角度来看）并不是那么困难。但是你说得对，它在客户端很容易，不需要往返服务器。
@Ken 他想在点击时执行此操作。
这样做的目的是服务器端验证
啊，这很清楚。最好的方法是在提交时验证整个表单。作为旁注，您应该在服务器端和客户端进行验证。

【解决方案1】：

这是一个简单的 C# 方法，用于在 WebControl 中添加或删除 CssClass...

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

【讨论】：

【解决方案2】：

我决定为 WebControl 创建扩展方法以获得通用解决方案。这是我的代码：

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

【讨论】：

【解决方案3】：

这是一种使用函数删除 css 类的方法。添加一个类会非常相似。

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 = "";
}

【讨论】：

那是相当糟糕的代码。像 var lsc = splitClasses.ToList(); 这样的东西怎么样？ lsc.Remove(类名); TextButton.CssCLass = String.Join(" ", lsc);

【解决方案4】：

您可以设置 ASP.NET 文本框控件的 CssClass 属性。要为一个元素添加多个 CSS 类，只需用空格分隔即可：

MyTextBox.CssClass = "class1 class2";

你可以把它放在你的 OnClick 事件处理程序中：

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

然后在代码隐藏中：

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

【讨论】：

哈哈，我不知道你能做到这一点。如果我想删除第二个 CSS 类怎么办？ MyTextBox.CssClass = "class1";??
好的，但是如果我不知道其他 CssClass 是什么。我将完成编码并将后端提供给设计人员。在这种情况下，我将知道 CssClass 的名称是什么。我不喜欢这样工作，因为它是硬编码的。我不能做 textbox.cssclas += "class2";
是的，只需将属性设置为单个类即可。您实际上只是为控件的类属性中显示的内容设置了一个字符串值。
如果你使用textbox.CssClass += "class2"，你最终会在你的类属性中得到class1class2。如果你想让这个更干净，我会写一个 AddClass 方法和一个 RemoveClass 方法。也许作为 WebControl 类的扩展方法。