web-dev-qa-db-ja.com

RazorビューのIfステートメント（CSSクラスの場合）

メッセージを読むかどうかに応じて、CSSクラスを切り替える必要があります。

簡単に言うと、次のようになります。

if (item.status == "Unread")
{
  <tr style="font-weight:bold">
  ...
}
else
{
  <tr>
  ...
}

しかし、私はこれを達成するのに苦労しています。何かがこれを成し遂げるために私に良いことを教えてもらえますか？ HTMLヘルパーなどを使用する必要がありますか？

これはこれまでの完全なコードです：

@foreach (var item in Model) {

    if (item.status == "Unread")
    {
        <tr style="font-weight:bold">
            <td>
                @Html.DisplayFor(modelItem => item.timestamp)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.subject)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.message_text)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.status)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.user_sender.username)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.user_reciever.username)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.id }) |
                @Html.ActionLink("Details", "Details", new { id = item.id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.id })
            </td>
        </tr>
    }
}
c#asp.net-mvcrazorhtml-helper
13
JohnC1

簡単な解決策は次のようになります。

@foreach (var item in Model) 
{
    var style = (item.status == "Unread") ? "font-weight:bold" : "";

    <tr style="@style">
        ...
    </tr>
}

ただし、通常は、個別のCSSクラスを用意してから、ステータスに基づいて適切なクラスの要素を直接装飾する方がクリーンです。例えば：

/* css */
tr.status-unread { font-weight: bold; }
...

/* razor */
@foreach (var item in Model) 
{
    <tr class="[email protected]()">
        ...
    </tr>
}
36
p.s.w.g

別のより簡単な解決策はこれです、

  1. 単一の条件で：

    @foreach (var item in Model) 
{
    <tr style="@Html.Raw(item.status == "Unread" ? "font-weight:bold" : "")">
        ...
    </tr>
}

  2. または、複数の条件がある場合は、要求どおりにCSSクラスを設定できます。

    @foreach (var item in Model) 
{
    <tr class="@Html.Raw((item.status == "Unread" && item.subject == "Hello World") ? "alert-success" : "")">
        ...
    </tr>
}
1
Adhik

このように私は自分のプロジェクトで使用しました。

以下のようなユニタリ作用素を使用できます

<td style="color:'@(item.ChangeRate > 0 ? "red" : "blue")'">
 <i class="fa" class="@(item.ChangeRate > 0 ? "fa-caret-up" : "fa-caret-down")"></i>
</td>
1
Hien Nguyen

あなたは答えを持っていますが。少し違う答えを探している人に役立つかもしれない場合に備えて、別の行を追加したいと思います。

@{
var itemIndex = 1;

@foreach (var item in Model)
{
     var needsBorder = (itemIndex % 4 != 0) ? "border-right: 1px solid #e6e7e8;" : "border-right: 0px solid #e6e7e8;";           

     <div class="something" style="@needsBorder ">
     itemIndex++;
}

上記の例では、4番目のインデックスまたは％x 4の場合にのみ、境界線を右に配置します。

0
Vinay Dahiya