How to style a variable string according to the result of a conditional statement?

Question

To simplify this problem, I have written a basic if/ else statement which shows the message "The number is correct!" if the condition is met on form posting or "Sorry. The number is incorrect!" if the condition is not met.

@{
    Layout = "/shared/_SiteLayout.cshtml";

    var num1 = Request["text1"];
    var num2 = "4";
    var totalMessage = "";

    if (IsPost)
    {
        if(num1.AsInt() == num2.AsInt())
        {
            totalMessage = "The number is correct!";
        }
        else
        {
            totalMessage = "Sorry. The number is incorrect!";
        }
    }
}

<br>
<br>
<br>
<br>
<br>

<div style="margin: 0 40px 0 40px">

  <p style="font-weight: bold;">@totalMessage</p>

  <br>
  <p>4 + what = 8? &nbsp; <strong>Add the missing number</strong>.</p>
  <form action="" method="post">
    <label for="text1">Add Number Here:</label>
    <input type="text" name="text1" />
    <input type="submit" value="Add" />
  </form>
</div>

The problem: How do I style the variable below a different colour if the condition is not met?

@totalMessage

I can solve the problem by using a second variable in the statement and markup, then wrap the variable in HTML tags and add CSS styling.

var totalMessage2 = "";
totalMessage2 = "Sorry. The number is incorrect!";

<style>
.incorrect {
color: red;       
}
</style>

<span class="incorrect">@totalMessage2</span>

But, if the condition is met, the empty HTML tag still renders.

Is there another way to do this?

Answer 1

As @kenci mentioned, you can do something like this:

@{
    Layout = "/shared/_SiteLayout.cshtml";

    var num1 = Request["text1"];

    var num2 = "4";
    var totalMessage = "";

    bool isCorrectNumber = false;

    if (IsPost)
    {
        if (num1.AsInt() == num2.AsInt())
        {
            totalMessage = "The number is correct!";
            isCorrectNumber = true;
        }
        else
        {
            totalMessage = "Sorry. The number is incorrect!";
            isCorrectNumber = false;
        }
    }
}

<br>
<br>
<br>
<br>
<br>

<div style="margin: 0 40px 0 40px">

    @{
        if (isCorrectNumber)
        {
            <span class="correct">@totalMessage</span>

        }
        else
        {
            <span class="incorrect">@totalMessage</span>

        }
    }
    <br>
    <p>4 + what = 8? &nbsp; <strong>Add the missing number</strong>.</p>
    <form action="" method="post">
        <label for="text1">Add Number Here:</label>
        <input type="text" name="text1" />
        <input type="submit" value="Add" />
    </form>
</div>