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.
-
This would be much easier with client side code. Is there a specific reason for wanting to do this in the codebehind?xanderer– xanderer2011-06-27 19:36:02 +00:00Commented Jun 27, 2011 at 19:36
-
It's not really that difficult (from a development perspective) from code-behind. But you're right about it being easy on the client side and not requiring a round-trip to the server.Ken Pespisa– Ken Pespisa2011-06-27 19:36:59 +00:00Commented Jun 27, 2011 at 19:36
-
@Ken he wants to do this onclick.xanderer– xanderer2011-06-27 19:37:47 +00:00Commented Jun 27, 2011 at 19:37
-
the purpose for this is server side validationDragan– Dragan2011-06-27 19:38:13 +00:00Commented Jun 27, 2011 at 19:38
-
Ah that clears things up considerable. The best way to do this is to validate the whole form on submit. As a side note you should validate on server and client side.xanderer– xanderer2011-06-27 19:46:20 +00:00Commented Jun 27, 2011 at 19:46
Add a comment
|
4 Answers
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());
}
}
}
Comments
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";
}
4 Comments
Dragan
hah i did not know you could do that. And what if I want to delete the second css class? MyTextBox.CssClass = "class1";??
Dragan
okay but what if I don't know what the other CssClass is. I'll be done with the coding and give the back-end to the designers.. in that case I'll hafta know what the name of the CssClass is. I dont prefer working like this since it's hard coded. Can't i do textbox.cssclas += "class2";
Ken Pespisa
Yes, just set the property to the single class. You're really just setting a string value of what will appear in the class attribute for the control.
Ken Pespisa
If you do
textbox.CssClass += "class2", you'll end up with class1class2 in your class attribute. I would write an AddClass method and a RemoveClass method if you want to make this cleaner. Perhaps as extension methods to the WebControl class.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 = "";
}
1 Comment
NetMage
That's pretty bad code. How about something like var lsc = splitClasses.ToList(); lsc.Remove(className); TextButton.CssCLass = String.Join(" ", lsc);
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();
}
