C# Razor视图上的If语句（用于CSS类）

我需要根据消息是否被读取在CSS类之间切换

简单地说，应该是这样的：

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

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

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

if（item.status==“未读”）
{
...
}
其他的
{
...
}

不过，我很难做到这一点。能告诉我一个好办法来完成这件事吗？ 我应该使用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>
    }
}

@foreach（模型中的变量项）{
如果（item.status==“未读”）
{
@DisplayFor（modelItem=>item.timestamp）
@DisplayFor（modelItem=>item.subject）
@DisplayFor（modelItem=>item.message\u文本）
@DisplayFor（modelItem=>item.status）
@DisplayFor（modelItem=>item.user\u sender.username）
@DisplayFor（modelItem=>item.user\u receiver.username）
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）|
@ActionLink（“详细信息”，“详细信息”，新的{id=item.id}）|
@ActionLink（“删除”，“删除”，新的{id=item.id}）
}
}

简单的解决方案如下：

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

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

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

@foreach（模型中的变量项）
{
var style=（item.status=“未读”）？“字体大小：粗体”：“；
...
}

但是请注意，使用单独的CSS类，然后根据其状态直接将元素装饰到适当的类中，通常会更干净。例如：

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

/* razor */
@foreach (var item in Model) 
{
    <tr class="status-@item.status.ToLowerInvariant()">
        ...
    </tr>
}

/*css*/
tr.status-unread{font-weight:bold；}
...
/*剃刀*/
@foreach（模型中的var项目）
{
...
}

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

在单一条件下：

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

@foreach（模型中的变量项）
{
...
}

或者您可以根据需要设置CSS类，如果有多个条件

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

@foreach（模型中的变量项）
{
...
}

---

虽然你已经得到了答案。我只想添加另一行，以防它可能会帮助正在搜索稍有不同答案的人

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

@{
var itemIndex=1；
@foreach（模型中的var项目）
{
var needsBorder=（itemIndex%4！=0）？“右边框：1px实心#e6e7e8；”：“右边框：0px实心#e6e7e8；”；
itemIndex++；
}

---

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

我在项目中使用了这种方法

您可以像下面这样使用酉运算符

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

Oh nice！，我不知道您可以在razor视图中这样做。我只想在您可以编写的第一个示例中添加它：

var style=（item.status=“Unread”）？“font-weight:bold”：null；

如果计算结果为null，则样式属性根本不会呈现。对于Razor页面中的任何html属性都是如此。我一直在多个类中使用它来更改“项”的外观。我更喜欢接受答案的编码样式。您将代码内联误认为代码简单。