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?

You could use a bool to store whether or not the number is correct. Based on the value of the bool, you could render a span with the correct class. `@{ if(numberIsCorrect) { @totalMessage } else { @totalMessage }` — Kenci, Apr 16 '19 at 13:01
When you write and post code, please be sure to use proper indention. It's extremely difficult to read code without it. I have edited your question to show how it should look. — mason, Apr 16 '19 at 13:06
@Kenci - This looks to be a valid answer. But, I simplified the problem from a contact form which has the conditional statement enclosed in @{ ... } at the top of the page, not in the markup. In that respect it won't work, but thanks. — DaniB, Apr 16 '19 at 14:03
The bool will still be avilable in your markup further down if you declare it at the top, use @{ ... } to access it again. I belive that you can also write HTML between those brackets. — Kenci, Apr 16 '19 at 20:22
@Kenci - Thanks. You're right and it works. I've implemented the code to provide a NuGet BotDetect CAPTCHA success or failure message in an email contact form.I'll up-vote and mark xzuttz as the answer. — DaniB, Apr 17 '19 at 08:19

score 1 · Accepted Answer · answered Apr 16 '19 at 20:31

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>

Hien Nguyen · Answer 2 · 2019-04-16T15:42:28.030

0

Comment out IsPost it will work. You should check IsPost only in controller.

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

edited Apr 16 '19 at 15:42

answered Apr 16 '19 at 13:01

Hien Nguyen

24,551
7
52
62

This generates "Sorry. The number is incorrect!" on page load, because the statement is processed without posting user input – DaniB Apr 16 '19 at 13:09
If validate fail it will return View is GET not POST – Hien Nguyen Apr 16 '19 at 13:11
@ Hien Nguyen - 'ViewBag' does not exist in the current context. This is not MVC, but web pages. Thanks anyway. – DaniB Apr 16 '19 at 14:09
did you change IsPostBack instead of IsPost? – Hien Nguyen Apr 16 '19 at 15:43

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

2 Answers2