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

Question

我是 MVC 的新手，并且仍在学习处理事情的最佳方法。

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

作为参考，我将在下面的这个问题中添加相关数据。

VIEW （删除时我要改成红色的）

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

控制器

public ActionResult DeleteConfirmed(int id)
{
    PurchaseOrder purchaseOrder = db.PurchaseOrders.Find(id);
    purchaseOrder.deleted = !purchaseOrder.deleted;
    db.SaveChanges();
    db.Entry(purchaseOrder).Reference("Supplier").Load();
    if (purchaseOrder.deleted)
    {
        TempData["message"] = string.Format("Purchase Order - {0} has been deleted\nCompany: {1}\nExpected Date:{2}\nNotes:{3}\n\nLink: {4}/PurchaseOrders/Details/{5}", purchaseOrder.ID, purchaseOrder.Supplier.Company, purchaseOrder.DeliveryDate, purchaseOrder.Details, IGT.baseUrl, purchaseOrder.ID);
    }
    else
    {
        TempData["message"] = string.Format("Purchase Order - {0} has been undeleted\nCompany: {1}\nExpected Date:{2}\nNotes:{3}\n\nLink: {4}/PurchaseOrders/Details/{5}", purchaseOrder.ID, purchaseOrder.Supplier.Company, purchaseOrder.DeliveryDate, purchaseOrder.Details, IGT.baseUrl, purchaseOrder.ID);

    }
    return RedirectToAction("Index");
}

谢谢！

Answer 1

保持简单:)

在 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>

Answer 2

看起来您使用的是引导程序，所以这是一种方法。

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

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
}

将属性添加到您的视图模型：

public class PurchaseOrderModel
{
    public bool Deleted { get; set; }

    public TextColour TextColour => Deleted ? TextColour.Primary : TextColour.Secondary;
}

那么在你看来：

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