Dynamic css class depending on value of Entity Property

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?

Darin Dimitrov · Accepted Answer · 2013-01-29 16:31:24Z

7

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>

answered Jan 29, 2013 at 16:31

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SB2055 Over a year ago

Thank you. Where would I put this class in the project?

Darin Dimitrov Over a year ago

There's no rule. You could put it in a Helpers folder for example. Just make sure that you have brought the namespace in which this class is defined into scope in the view (either by adding a @using directive or globally by adding it to the namespaces section of the ~/Views/web.config file)

Collectives™ on Stack Overflow

Dynamic css class depending on value of Entity Property

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related