Razor View color row based on one field

Question

I have a ticket list view that has tickets that can have 3 different statuses: Active, Deferred, and Closed. I want to be able to highlight the text in each row differently. I want the active to be green. The closed to be red. And the deferred to be grey. I have found how to do it with Jquery. I don't want to learn Jquery at the moment if I don't have to - are there other ways to do it directly in the view. Then I want to add a small legend to the top of what each color means. Here is my view code:

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

What @hutchonoid suggested worked but Now I need to add a legend to the top. How do I color each of these equal to their respective colors:

<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>

Answer 1

As @kai's suggests you can simply output the status as the class as follows in a loop:

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

// etc

Then define it within CSS as follows:

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

jsFiddle

Answer 2

Avoid setting the HTML style attribute. It's considered bad practice since it makes your markup responsible for the styling, something that is handled way better by CSS.

I recommend defining three CSS classes, .active, .deferred and .closed and set the color attribute there. Then you can set the CSS class of the <tr> in your view similarly to how you do it now.