Javascript 在MVC中有条件地改变字体颜色

我是MVC的新手，仍然在学习处理事情的最佳方式

我的问题是我想有条件地改变字体颜色。例如，如果某个内容被删除。我想把项目的字体颜色改为红色

为了便于参考，我将在下面的问题中添加相关数据

查看删除时要更改为红色的内容

<div class="well text-center">
  <h1><b>Purchase Order @Html.DisplayFor(model => model.OrderID)</b></h1>    
</div>

---

谢谢

看起来您正在使用引导，所以这里有一种方法

创建一个代表您的颜色的类：

public sealed class TextColour
{
    public string CssClass { get; }

    private static IDictionary<string, TextColour> _instances = new Dictionary<string, TextColour>();

    private TextColour(string cssClass)
    {
        CssClass = cssClass;
    }

    private static TextColour GetInstance(string cssClass)
    {
        if (!_instances.ContainsKey(cssClass))
        {
            _instances[cssClass] = new TextColour(cssClass);
        }

        return _instances[cssClass];
    }

    public static TextColour Primary => GetInstance("text-primary");
    public static TextColour Secondary => GetInstance("text-secondary");

    // Add others here
}

那么在你看来,

<div class="well text-center @Model.TextColour.CssClass">
  <h1><b>Purchase Order @Html.DisplayFor(model => model.OrderID)</b></h1>    
</div>

---

简单一点：

在DisplayFor周围放置一个span，并在deleted属性上使用三元运算符设置css类，该类将在删除时将文本变为红色，否则将变为其他颜色

<div class="well text-center">
  <h1>
     <b>Purchase Order <span class="@(Model.deleted ? "DeletedCSSClass" : "ActiveCSSClass")"> @Html.DisplayFor(model => model.OrderID)</span></b>
  </h1>    
</div>

---

这回答了你的问题吗？如果您只是想在模型中注入样式逻辑，为什么还要使用MVC模式呢？@Travis view models只适用于视图。它不在域实体中。我不喜欢在所有视图中都有这些条件语句。它们很快就会变得混乱。@JohnathanBarclay不管个人喜好如何，视图逻辑都属于视图。分离关注点是关键。感谢您的帮助！

<div class="well text-center @Model.TextColour.CssClass">
  <h1><b>Purchase Order @Html.DisplayFor(model => model.OrderID)</b></h1>    
</div>

<div class="well text-center">
  <h1>
     <b>Purchase Order <span class="@(Model.deleted ? "DeletedCSSClass" : "ActiveCSSClass")"> @Html.DisplayFor(model => model.OrderID)</span></b>
  </h1>    
</div>