Question

我需要在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>
    }
}

Answer 1

一个简单的解决方案是这样的：

@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="status-@item.status.ToLowerInvariant()">
        ...
    </tr>
}

Answer 2

这样我在项目中使用了。

您可以像下面那样使用unit运算符

array[i][j]

Answer 3

另一个更简单的解决方案就是这个，

单一条件：

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

或者您可以按照多个条件（如果有的话）设置CSS类，

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

Answer 4

虽然你有答案。我只是想添加另一行，以防它可能帮助那些正在寻找稍微不同答案的人。

@{
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。

如果是Razor Views的Statement（For CSS Class）

4 个答案: