CODEWITHSUNDEEP
asp.netcsscode-behind
Dragan
Dragan

Reputation: 182

Add additional Css class programmatically

I have a textbox with a Css class called 'required'. When a user click a button, I'd like to add additional Css Class to the textbox called 'error' without removing the 'required' class. I want to accomplish this from code-behind.

Upvotes: 11

Views: 30487

Answers (4)

Bruce Allen
Bruce Allen

Reputation: 299

Here's a simple C# method to add or remove a CssClass into a 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();
    }

Upvotes: 1

FSA
FSA

Reputation: 171

I decided to create extension methods for WebControl to have a generic solution. Here's my code:

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

Upvotes: 17

webtrifusion
webtrifusion

Reputation: 4556

Here is a way to remove css class using a function. Adding a class would be very 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 = "";
}

Upvotes: 4

Ken Pespisa
Ken Pespisa

Reputation: 22284

You can set the CssClass property of the ASP.NET Textbox control. To add more than one CSS class for an element, just separate it with a space:

MyTextBox.CssClass = "class1 class2";

You can put this in your OnClick event handler:

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

Then in code-behind:

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

Upvotes: 13

Related Questions