web-dev-qa-db-ja.com

Razor MVC 4で条件値を持​​つ2番目のCSSクラスを追加する方法

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

モデルプロパティ@ Model.Detailsに基づいて、リストアイテムを表示または非表示にします。詳細がある場合はdivが表示され、そうでない場合は非表示になります。 jQueryを使用して、クラスの表示または非表示をそれぞれ追加するだけです。他の目的のために、別のクラス「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;="">。

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

razorasp.net-mvc-4html
128
R. Schreurs

ビューにはまだ有効なロジックが存在すると信じています。しかし、@ 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"))">
248
von v.

この：

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

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

    <div class="details hide">

そして私が望むマークアップです。

60
R. Schreurs

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

    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"/>
23
syned

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

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