Razor View 基于一个字段的颜色行

Posted 2023-02-26

【中文标题】Razor View 基于一个字段的颜色行

【英文标题】：Razor View color row based on one field

【发布时间】：2015-06-25 13:39:49

【问题描述】：

我有一个工单列表视图，其中的工单可以有 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>

【问题讨论】：

我会将 CSS 类传递给您的 <tr>。然后你可以用你喜欢的 CSS 来设置样式。

【参考方案1】：

正如@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

【讨论】：

感谢您修复了第一部分。现在我想在顶部添加一个图例，但我不知道如何着色。我尝试将相应的单词放入样式中，但它不会为字体着色。

@djblois 从类中删除tr.，即.Active ，然后您可以将其应用于任何dom元素。 :)

【参考方案2】：

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

我建议定义三个 CSS 类，.active、.deferred 和 .closed，并在那里设置 color 属性。然后你可以像现在一样在你的视图中设置<tr>的CSS类。

【讨论】：

凯，谢谢。我对 css 很陌生。我该怎么做？

@djblois 在链接到 CSS 文件的文档头中添加 <link> 标签，然后在该文件中定义类。你可以在这里阅读更多信息：w3schools.com/aspnet/mvc_layout.asp