Razor基于一个字段查看颜色行

本文关键字：颜色 字段 于一个 Razor | 更新日期: 2023-09-27 17:59:55

我有一个票证列表视图，其中包含可以具有3种不同状态的票证：活动、延迟和关闭。我希望能够以不同的方式突出显示每一行中的文本。我希望活动的是绿色的。关闭为红色。延迟为灰色。我已经找到了如何使用Jquery进行查询。如果不必的话，我现在不想学习Jquery——有没有其他方法可以直接在视图中学习。然后我想在每种颜色的顶部添加一个小的图例。这是我的视图代码：

        @model IEnumerable<HelpDesk.Model.Ticket>
<br />
<div>
    @Html.ActionLink("Back to Search Query", "TechSearchTickets")
</div>

<h3>@ViewBag.Title</h3>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.TicketNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.OpenDate)
        </th>
        <th>
            Technician
        </th>
        <th>
            @Html.DisplayNameFor(model => model.OpenUser.FullName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Category.CategoryName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TicketStatus.StatusDescription)
        </th>
        <th>
            Last Date
        </th>
        <th>
            Last Updated By
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CloseDate)
        </th>
        <th>
            Opening Note
        </th>
        <th></th>
    </tr>
@foreach (var item in Model.OrderByDescending(m => m.OpenDate))
{
    if (item.TicketStatus.StatusDescription == "Active")
    {
        string FontColor = "Color:Green";
    }    
    else if (item.TicketStatus.StatusDescription == "Deferred")
    {
        string FontColor = "Color:Grey";
    }
    else
    {
        string FontColor = "Color:Red";
    }
    <tr style="@FontColor">
        <td>
            @Html.DisplayFor(modelItem => item.TicketNumber)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.OpenDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Technician.FullName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.OpenUser.FullName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Category.CategoryName)
        </td>
        <th>
            @Html.DisplayFor(modelItem => item.TicketStatus.StatusDescription)
        </th>
        <td>
            <div>
                @Html.DisplayFor(modelItem => item.TicketNotes.OrderBy(t => t.TicketNoteDate).Last().TicketNoteDate)
            </div>
        </td>
        <td>
            <div>
                @Html.DisplayFor(modelItem => item.TicketNotes.OrderBy(t => t.TicketNoteDate).Last().UserNote.FullName)
            </div>
        </td>
        <td>
            @if (item.CloseDate == null)
            {
                <span style="font-weight:normal;">@Html.Label("----------", htmlAttributes: new { @class = "control-label col-md-2" })</span>
            }
            else
            {
                <span style="font-weight:normal;">@Html.DisplayFor(model => item.CloseDate)</span>
            }
        </td>
        <td>
            <div style="overflow:auto; width:300px;">
                @Html.DisplayFor(modelItem => item.TicketNotes.OrderBy(t => t.TicketNoteDate).First().Note)
            </div>
        </td>
        <td>
            @Html.ActionLink("Open/Edit", "EditTechTicket", new { id = item.TicketId, returnUrl = "TechSearchResult" })
        </td>
    </tr>
}
</table>

@hutchonoid的建议奏效了，但现在我需要在顶部添加一个传奇。如何将这些颜色分别着色为与其各自的颜色：

<div class="col-md-12 col-xs-12">
    <div class="col-md-1">Active</div> 
    <div class="col-md-1">Deferred</div> 
    <div class="col-md-1">Closed</div> 
</div>

Razor基于一个字段查看颜色行

正如@kai的建议，您可以简单地将状态输出为循环中的类，如下所示：

@foreach (var item in Model.OrderByDescending(m => m.OpenDate))
{
    <tr  class="@item.TicketStatus.StatusDescription">
    <td>
        @Html.DisplayFor(modelItem => item.TicketNumber)
    </td>
// etc

然后在CSS中定义如下：

tr.Active
{
    color:Green;
}
tr.Deferred
{
    color:Grey;
}
tr.Closed
{
    color:Red;
}

jsFiddle

避免设置HTML样式属性。这被认为是一种糟糕的做法，因为它让标记负责样式，而CSS可以更好地处理这些问题。

我建议定义三个CSS类，.active、.deferred和.closed，并在其中设置color属性。然后，您可以在视图中设置<tr>的CSS类，类似于现在的设置方式。

相关文章：