Change CssClass of an Textbox programatically

Question

I've got a little Problem with my first ASP-Project. Im offering the user and input-mask to enter data. At some points I want to control if the input is numeric. If not I want to change the border color of my Textbox. This is my Textbox:

<asp:TextBox ID="tbOnlyNumeric" runat="server" Height="30px" CssClass="MyNumericBox" autocomplete="off"></asp:TextBox>

The style of the box looks like that:

.MyNumericBox
{
    width:250px;
    overflow: auto;
    font-size: 20px;
    position:relative;
    right:111px;
    border-color: #dcdcdc;
    padding: 4px;
    margin:15px;
    border-width: 2px;
    border-radius: 10px;
    border-style: solid;
    transition: box-shadow 0.3s, border 0.3s;
    text-align: right;
    padding-right: 18px;
    outline: none;
}

My idea was to cast the the Text of the textbox in an try-catch-statment:

     try
     {
        if (string.IsNullOrWhiteSpace(tbOnlyNumeric.Text))
        {
          throw new Exception();
        }
        else
        {
          salesExpected = Convert.ToInt32(tbOnlyNumeric.Text.ToString().Replace(".", string.Empty));
        }
     }
     catch (Exception ex)
     {
          debugLabel.Text = "EX";
          correct = false;
          tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");
     }

So if there is something wrong with my textbox it should look like that:

but instead it looks like that:

I already noticed that if watch it in chrome the old css class is deleted but the new one isn't addet.

Any idea why?

Thanks in advance

You don't need to use "CssClass.Replace" you can just use CssClass("MyExpectedBoxWrong") it will over-write the class that was there. That said, you really want to do this client side (something closer to Francis Saul's answer below). — Stephen Brickner
– Stephen Brickner, Commented Nov 10, 2015 at 13:07
@StephenBrickner ohhh yeah that's it. Using CssClass and not Replace works fine — Felix Gerber
– Felix Gerber, Commented Nov 10, 2015 at 13:11

Francis Saul · Accepted Answer · 2015-11-10 13:02:26Z

1

could you try this code. put this in your catch statement

ScriptManager.RegisterClientStartUpScript(this,this.GetType(),"pop","changeCssStyle();",true);

//in the head section of your aspx file create a script that will change the //css style of the textbox

<script type="text/javascript">
   function changeCssStyle(){
   //if you are using a master page refer the id of textbox to the id of 
   //head content in master page e.g. MainContent_tbOnlyNumeric

   //lets assume you already have reference to jquery in your head section
   $('#MainContent_tbOnlyNumeric').css("border-color","red");

   } 
</script>

answered Nov 10, 2015 at 13:02

Francis Saul

7502 gold badges18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Francis Saul Over a year ago

this is what i do if I want to manipulate html/jquery from code behind.

Felix Gerber · Accepted Answer · 2015-11-10 13:19:01Z

1

Finally figured outthat using:

tbSalesExpected.CssClass = "MyExpectedBoxWrong";

instead of:

tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");

fixes the problem.

Thanks for your answers and comments!

answered Nov 10, 2015 at 13:19

Felix Gerber

1,6474 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

Change CssClass of an Textbox programatically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related