动态css类取决于实体属性的值

Question

我有一个包含Status属性的Orders模型.根据Status的值,我想在dom中设置多个元素的CSS.

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

我想在Details视图中根据Order.Status的值设置那些绿色/橙色/灰色类.我怎样才能做到这一点？

Answer 1

您可以编写一个自定义帮助程序,它将根据Status值返回正确的CSS:

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

然后你可以在视图中调用这个帮助器来获得正确的CSS类:

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