184

Microsoft はrazor MVC4で html 属性の自動レンダリングをいくつか作成しましたが、条件付きの razor 式に基づいて、要素で 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;="">.

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

4

4 に答える 4

360

ビューにはまだ有効なロジックがあると思います。しかし、この種のことについては、@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"))">
于 2013-03-29T10:01:53.393 に答える
76

これ：

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

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

    <div class="details hide">

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

于 2013-03-29T09:40:29.127 に答える
28

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

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

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

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

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

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

2 つの非 null プロパティを使用すると、次のようにレンダリングされます。

    <div class="class1 class2"/>

class1 が null の場合

    <div class=" class2"/>
于 2013-07-23T19:36:57.927 に答える