[解決済み] razor MVC 4 で条件付きの 2 番目の css クラスを追加する方法

質問

マイクロソフトは、いくつかの html属性の自動的なレンダリング しかし、razor の条件式に基づいて、ある要素に 2 つ目の css クラスをレンダリングする方法を見つけるのに、かなり時間がかかりました。今回はそれを紹介したいと思います。

モデルプロパティ @Model.Details に基づいて、リストアイテムを表示または非表示にしたいと思います。詳細がある場合はdivを表示し、そうでない場合は非表示にします。jQueryを使えば、それぞれshowとhideというクラスを追加するだけでいい。他にも、"details"というクラスも追加しておきたい。というわけで、マークアップは以下のようになる。

<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")">

第二の選択肢

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

第3の選択肢

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