如何在ASP.NET MVC的foreach循环中条件添加CSS背景色

嘿，我来帮你搞定这个需求！作为ASP.NET MVC新手，其实这个实现起来超简单，核心就是在生成表格行的时候，根据BillAmount的值动态判断并添加样式就行。下面给你两种常用的实现方式：

方式一：直接在行内动态添加样式 #

这种方式适合快速测试或者样式比较简单的场景，直接在<tr>标签的style属性里用Razor三元运算符判断：

<tbody>
    @foreach (var item in Model)
    {
        <!-- 当BillAmount等于0时添加背景色样式，否则留空 -->
        <tr style="@(item.BillAmount == 0.00 ? "background-color: #f5f5f5;" : "")">
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.TicketNo)</td>
            <td style="padding-left: 12px; display: none;">@Html.DisplayFor(modelItem => item.name)</td>
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.BillAmount)</td>
            <!-- 这里补全你剩下的列代码 -->
        </tr>
    }
</tbody>

方式二：使用CSS类（推荐，样式与结构分离） #

如果后续可能要修改样式或者复用这个样式，更推荐用CSS类的方式，维护起来更方便：

首先在页面的<head>或者单独的CSS文件里定义一个样式类：

<style>
    /* 自定义金额为0的行背景色 */
    .zero-bill-row {
        background-color: #f5f5f5;
        /* 还可以添加其他样式，比如字体颜色等 */
        /* color: #dc3545; */
    }
</style>

然后在生成表格行的时候动态添加这个类：

<tbody>
    @foreach (var item in Model)
    {
        <!-- 当BillAmount等于0时添加zero-bill-row类，否则留空 -->
        <tr class="@(item.BillAmount == 0.00 ? "zero-bill-row" : "")">
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.TicketNo)</td>
            <td style="padding-left: 12px; display: none;">@Html.DisplayFor(modelItem => item.name)</td>
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.BillAmount)</td>
            <!-- 这里补全你剩下的列代码 -->
        </tr>
    }
</tbody>

小提醒 #

注意要确保模型里的属性名和你代码里的一致哦！你提到的BILL-AMOUNT在C#模型里应该是类似BillAmount的命名（PascalCase），如果模型里的属性名不一样，记得把代码里的item.BillAmount改成对应的名称，不然会报错~

内容的提问来源于stack exchange，提问作者aparna rai