CODEWITHSUNDEEP
javascriptc#asp.net-mvcrazor
user9905812
user9905812

Reputation:

Changing font colour conditionally in MVC

I'm new to MVC and still learning the best way to go about things.

My problem is I want to change a font colour conditionally. For example, if something gets deleted. I want the font colour of the item to change to red.

For reference I will add the relevant data to this question below.

VIEW (What I want to be changed to red when deleted)

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

Controller

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");
}

Thanks!

Upvotes: 0

Views: 1660

Answers (2)

Johnathan Barclay
Johnathan Barclay

Reputation: 20373

Looks like your using bootstrap so here's one approach.

Create a class representing your colours:

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
}

Add a property to your view model:

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

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

Then in your view:

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

Upvotes: 0

Travis Acton
Travis Acton

Reputation: 4440

Just keep things simple :)

Put a span around the DisplayFor and use a ternary operator on the deleted property to set a css class that will either turn the text red if deleted or a different color if not.

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

Upvotes: 1

Related Questions