Question

I have an Orders model containing a Status property. Depending on the value of Status, I’d like to set the CSS of multiple elements in the dom.

<span class = "green">ORDERED</span>
<span class = "orange">SHIPPED</span>
<span class = "gray">RECEIVED</span>

I’d like to set those green/orange/gray classes according to the value of Order.Status, within the Details view. How can I do this?

Answer 1

You could write a custom helper that will return the correct CSS based on the Status value:

public static class Htmlextensions
{
    public static string GetStatusCss(this HtmlHelper html, string status)
    {
        if (string.Equals(status, "ORDERED", StringComparison.OrdinalIgnoreCase))
        {
            return "green";
        }
        else if (string.Equals(status, "SHIPPED", StringComparison.OrdinalIgnoreCase))
        {
            return "orange";
        }
        return "gray";
    }
}

and then you could call this helper in the view to get the correct CSS class:

<span class="@Html.GetStatusCss(Model.Status)">
    @Html.DisplayFor(x => x.Status)
</span>