css - Entity プロパティの値に応じた動的 CSS クラス

Question

Status プロパティを含む Orders モデルがあります。Statusの値によって、複数要素のCSSをdomに設定したい。

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

詳細ビュー内で、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>