我有一个票证 ListView ,其中的票证可以有 3 种不同的状态:有效、延期和已关闭。我希望能够以不同的方式突出显示每行中的文本。我希望事件是绿色的。关闭时为红色。并且延迟为灰色。我已经找到了如何使用 Jquery 来做到这一点。如果不需要的话,我现在不想学习 Jquery - 有其他方法可以直接在 View 中完成它吗?然后我想在每种颜色含义的顶部添加一个小图例。这是我的查看代码:
@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>
最佳答案
正如@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
关于c# - Razor View 基于一个字段的颜色行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31052062/