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

Question

我是MVC的新手，仍在学习最好的做事方法。

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

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

查看(我希望在删除时更改为红色的内容(

<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 deletednCompany: {1}nExpected Date:{2}nNotes:{3}nnLink: {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 undeletednCompany: {1}nExpected Date:{2}nNotes:{3}nnLink: {4}/PurchaseOrders/Details/{5}", purchaseOrder.ID, purchaseOrder.Supplier.Company, purchaseOrder.DeliveryDate, purchaseOrder.Details, IGT.baseUrl, purchaseOrder.ID);
}
return RedirectToAction("Index");
}

谢谢！

Answer 1

保持简单:)

在 DisplayFor 周围放置一个跨度，并在已删除的属性上使用三元运算符来设置一个 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>