かみそりMVC 4で条件付き値を持つ2番目のCSSクラスを追加する方法

Microsoft がかみそりMVC4 でHTML属性のオートマジックレンダリングを作成しましたが、条件付きかみそり式に基づいて、要素に2番目のCSSクラスをレンダリングする方法を見つけるのにかなりの時間がかかりました。共有したいと思います。

モデルプロパティ@ Model.Detailsに基づいて、リストアイテムを表示または非表示にします。詳細がある場合はdivを表示し、それ以外の場合は非表示にする必要があります。jQueryを使用して、クラスshowまたはhideをそれぞれ追加するだけで済みます。他の目的のために、「詳細」という別のクラスも追加したいと思います。だから、私のマークアップは：

<div class="details show">[Details]</div> または <div class="details hide">[Details]</div>

以下に、失敗した試行の一部を示します（詳細がないと仮定した結果のマークアップ）。

これ：<div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>、

これをレンダリングします：<div class="details" hide="">。

これ：<div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>。

これをレンダリングします：<div class=""details" hide&quot;="">。

この： <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

これをレンダリングします：<div class="'details" hide&#39;="">。

これらはどれも正しいマークアップではありません。

ビューにはまだ有効なロジックが存在する可能性があると思います。しかし、@ BigMikeに同意するこの種のことについては、モデルに配置する方が適切です。問題は3つの方法で解決できると述べました：

あなたの答え（これがうまくいくと仮定して、私はこれを試していません）：

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

2番目のオプション：

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

3番目のオプション：

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

この：

    <div class="details @(Model.Details.Count > 0 ? "show" : "hide")">

これをレンダリングします：

    <div class="details hide">

そして私が欲しいマークアップです。

次のようにモデルにプロパティを追加できます。

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

すると、ビューがよりシンプルになり、ロジックがまったく含まれなくなります。

    <div class="details @Model.DetailsClass"/>

これは多くのクラスでも機能し、nullの場合はクラスをレンダリングしません。

    <div class="@Model.Class1 @Model.Class2"/>

nullでないプロパティが2つある場合、レンダリングされます。

    <div class="class1 class2"/>

class1がnullの場合

    <div class=" class2"/>

String.Format関数を使用して、条件に基づいて2番目のクラスを追加できます。

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">