动态颜色 css 或内联样式 asp.net mvc razor

Question

所以这是我的 div，for 循环创建一个新的列表项，并根据数据库中工单的 ID 显示工单的所有状态，即打开、进行中、关闭等。

 <div id="Child" style="display:inline-block;" class="box">
            <ul id="first-list">
                <!--Foreach Goes Here-->
                @foreach (var item in Model)
                {
                <li>
                    <span></span>
                    <div class="title">
                        @Html.DisplayFor(model => item.Description)
                    </div>
                    <div class="info">@Html.DisplayFor(model => item.ActivityContent).</div>
                    <div class="info">@Html.DisplayFor(model => item.Subject) <a href=@Url.Action("EditActivity", "Home", new { area = "EditActivity", Id = item.TicketId , TypeId = item.ActivityTypeId }) data-toggle="modal" data-target="#editModal" data-modal="edit"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></div>
                    <div class="name">- @Html.DisplayFor(model => item.CreatedByUser)</div>
                    <div class="time">
                        @if(item.ModifiedDateTime != null)
                        {
                            <span>@(item.ModifiedDateTime == null ? "" : Convert.ToDateTime(item.ModifiedDateTime).ToString("MMMM dd, yyyy"))</span>
                        }
                        else
                        {
                            <span>@(item.CreatedDateTime == null ? "" : Convert.ToDateTime(item.CreatedDateTime).ToString("MMMM dd, yyyy"))</span>
                        }
                        @if(item.ModifiedDateTime != null)
                        {
                            <span style="padding-left:35px;">@(item.ModifiedDateTime == null ? "" : Convert.ToDateTime(item.ModifiedDateTime).ToShortTimeString())</span>
                        }
                        else
                        {
                            <span style="padding-left:35px;">@(item.CreatedDateTime == null ? "" : Convert.ToDateTime(item.CreatedDateTime).ToShortTimeString())</span>
                        }
                    </div>
                </li>
                }
            </ul>
        </div> 

我想做的是为每个州添加不同的颜色。例如状态打开时为绿色，关闭时为红色。任何人都有一个很好的方法来解决这个问题？我在一个名为 box 的类中设置 div 的颜色，看起来像这样......

.box ul li {
            margin: 30px 60px 60px;
            position: relative;
            padding: 5px 5px 5px 5px;
            background: #e56565;
            color: #fff;
            border-radius: 10px;
            line-height: 20px;
            width: 55%
        }

提前感谢您对此问题的任何帮助。

Answer 1

更易于维护的方法是在状态查找表中添加一个新列，用于查找背景颜色或 css 类。用您想要的颜色播种值，然后从表中读取并使用它。

另一种选择是创建与状态名称/代码/id 匹配的 CSS 类。并使用它。这种方法的问题是，每次向系统添加新状态时，都需要更改代码（添加新的 css 类）。这些 css 类将简单地覆盖 bg 颜色。因此，您的代码将使用状态代码/名称/id/ 生成 css 类名称。

类似的东西。

@foreach (var item in Model)
{
  <li class="li-@(item.State.Code)">
     <!-- Existing code-->
  </li>
}

假设你有 open 和 closed 等 State code 值，你将创建 2 个 css 类

.li-open
{
  background-color:green;
}
.li-closed
{
  background-color: red;
}

这些特定的 css 类应该覆盖默认的 li 样式。在您的 css 中根据需要使用 !important