You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

视图动态变化:如何根据item.Status值改变表格行文本颜色?

如何在ASP.NET Razor视图中根据Status动态修改表格行文本颜色

没问题,用CSS类结合Razor的条件判断就能完美实现这个需求,我给你分步骤说明:

1. 先定义对应的CSS样式类

首先在你的视图头部(或者全局样式文件里)添加两个CSS类,分别对应不同状态的文本颜色:

/* 正常状态(Status=0)的文本样式 */
.text-active {
    color: #1a202c; /* 深黑色,可根据你的设计调整 */
}

/* 非0状态的文本样式,搭配删除线更直观 */
.text-inactive {
    color: #718096; /* 浅灰色,弱化显示 */
}

如果想让整行所有单元格都统一变色,也可以定义行级的CSS类,这样更高效:

/* 正常行样式 */
.row-active td {
    color: #1a202c;
}

/* 失效行样式 */
.row-inactive td {
    color: #718096;
}

2. 修改Razor视图代码,动态绑定CSS类

接下来修改你现有的Razor代码,用Razor的三元运算符@(条件 ? 真时的类名 : 假时的类名)来动态给元素添加样式类:

方案一:给单个单元格绑定类(精准控制)

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td class="@(item.Status != 0 ? "text-inactive" : "text-active")">
                @{
                    if (item.Status != 0)
                    {
                        <del>@Html.DisplayFor(modelItem => item.Name)</del>
                    }
                    else
                    {
                        @Html.DisplayFor(modelItem => item.Name)
                    }
                }
            </td>
            <td class="@(item.Status != 0 ? "text-inactive" : "text-active")">
                @Html.DisplayFor(modelItem => item.Count)
            </td>
        </tr>
    }
</tbody>

方案二:给整行绑定类(更简洁)

如果整行的文本都需要变色,直接把类加到<tr>标签上就行,不用每个<td>都写一遍:

<tbody>
    @foreach (var item in Model)
    {
        <tr class="@(item.Status != 0 ? "row-inactive" : "row-active")">
            <td>
                @{
                    if (item.Status != 0)
                    {
                        <del>@Html.DisplayFor(modelItem => item.Name)</del>
                    }
                    else
                    {
                        @Html.DisplayFor(modelItem => item.Name)
                    }
                }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Count)
            </td>
        </tr>
    }
</tbody>

为什么这么做?

这种方式遵循了样式与逻辑分离的原则:以后要调整颜色或者样式,直接修改CSS就行,不用动Razor的业务逻辑代码,维护起来更方便。而且Razor的三元运算符写法简洁直观,一眼就能看明白状态对应的样式。

内容的提问来源于stack exchange,提问作者Tiranu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.12 04:26:48