如何根据条件语句的结果设置变量字符串的样式？答案

【问题标题】：How to style a variable string according to the result of a conditional statement?如何根据条件语句的结果设置变量字符串的样式？
【发布时间】：2019-09-06 14:06:43
【问题描述】：

为了简化这个问题，我编写了一个基本的 if/else 语句，如果在表单发布时满足条件或 “对不起。数字不正确！” 如果不满足条件。

@{
    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>

问题：如果不满足条件，如何将变量设置为不同颜色？

@totalMessage

我可以通过在语句和标记中使用第二个变量来解决这个问题，然后将变量包装在 HTML 标记中并添加 CSS 样式。

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

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

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

但是，如果满足条件，空的 HTML 标记仍会呈现。

还有其他方法吗？

【问题讨论】：

您可以使用布尔值来存储数字是否正确。根据布尔值，您可以使用正确的类渲染跨度。 @{ if(numberIsCorrect) { <span class="correct">@totalMessage</span> } else { <span class="incorrect">@totalMessage</span> }
在编写和发布代码时，请务必使用正确的缩进。没有它就很难阅读代码。我已经编辑了您的问题以显示它的外观。
@Kenci - 这看起来是一个有效的答案。但是，我从一个联系表单简化了问题，该表单在页面顶部而不是标记中包含条件语句 @{ ... }。在这方面它不会起作用，但是谢谢。
如果您在顶部声明 bool，则该 bool 仍可在您的标记中使用，请使用 @{ ... } 再次访问它。我相信您也可以在这些括号之间编写 HTML。
@Kenci - 谢谢。你是对的，它有效。我已实现代码以在电子邮件联系表单中提供 NuGet BotDetect CAPTCHA 成功或失败消息。我将投票并将 xzuttz 标记为答案。

标签： asp.net razor asp.net-webpages webmatrix-3

【解决方案1】：

注释掉IsPost 它会起作用。您应该只在控制器中检查IsPost。

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

【讨论】：

这会生成“对不起。号码不正确！”在页面加载时，因为该语句是在没有发布用户输入的情况下处理的
如果验证失败，它将返回 View is GET not POST
@Hien Nguyen - 当前上下文中不存在“ViewBag”。这不是 MVC，而是网页。还是谢谢。
您是否更改了 IsPostBack 而不是 IsPost？

【解决方案2】：

正如@kenci 提到的，你可以这样做：

@{
    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>

【讨论】：