asp.net-mvc - モデル値に基づいて要素にスタイルを追加します

Question

特定の基準が満たされた場合、divタグに単純なインラインスタイルを追加したいと思います。

「disabled」クラスを正常に適用できますが、カーソルスタイルを表示できません。

<div class="item  @(item.AvailableTimeSlots == "0" ? "disabled" : "")" @(item.AvailableTimeSlots == "0" ? "style='cursor: default;'" : "")>

ポインタはありますか？

score 3 · Accepted Answer

ワーキングスニペット

<div class="item  @("0" == "0" ? "disabled" : "")" @Html.Raw("0" == "0" ? "style='cursor: default;'" : "")>

追加Html.Raw()すると問題が解決しました。それがないと、次のような結果になります。

<div class="item  disabled" style=&#39;cursor: default;&#39;>

いくつかの異なるブラウザーを試しましたが、DOMを検査するとそれぞれ異なる結果が得られました。IE8はそれを壊します。Chromeはそれを誤って作り直します。IE9は正しく整形されているように見えます。

いくつかのメモ：

インラインスタイルを削除する@Jamesのソリューションは良いものです。現在のコードは本当に読みづらく、インラインスタイルがとにかく良いアイデアになることはめったにありません。
item.AvailableTimeSlots文字列ではなく整数である必要があるようです。

score 2 · Accepted Answer

ポインタはありますか？

できる限りインラインスタイルを避けることを常にお勧めします。cursorコードを独自のCSSクラスに移動し、純粋にクラスで作業することをお勧めします。

CSS

.default {
    cursor: default;
}
.disabled {
    ...
}

意見

@{
    var itemCLass = @item.AvailableTimeSlots == "0" ? "disabled" : "default";
}
<div class="item @itemClass" />

2 に答える 2