Razor 视图上的 If 语句（适用于 CSS 类）答案

【问题标题】：If Statement (For CSS Class) on Razor ViewsRazor 视图上的 If 语句（适用于 CSS 类）
【发布时间】：2013-12-24 13:45:00
【问题描述】：

我需要根据是否读取消息在 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-mvc razor html-helper

【解决方案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>
}

【讨论】：

哦，太好了！，我不知道你可以在剃刀视图中这样做。
我只想在第一个示例中添加，您可以编写：var style = (item.status == "Unread") ? "font-weight:bold" : null;，如果计算结果为 null，则样式属性根本不会呈现。这适用于 Razor 页面中的任何 html 属性。我一直在多个课程中使用它来改变“项目”的外观。

【解决方案2】：

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

单一条件：

@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>
}

【讨论】：

我更喜欢接受答案的编码风格。您将代码内联误认为代码简单。

【解决方案3】：

虽然你已经得到了答案。我只想添加另一行，以防它可能对正在寻找略有不同答案的人有所帮助。

@{
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++;
}

上面的例子只会在第四个索引或 % by 4 时将边框放在右边。

【讨论】：

【解决方案4】：

我在我的项目中使用了这种方式。

你可以像下面这样使用一元运算符

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

【讨论】：