c# - Razor View color row based on one field -

i have ticket list view has tickets can have 3 different statuses: active, deferred, , closed. want able highlight text in each row differently. want active green. closed red. , deferred grey. have found how jquery. don't want learn jquery @ moment if don't have - there other ways directly in view. want add small legend top of each color means. here view code:

        @model ienumerable<helpdesk.model.ticket>  <br />  <div>     @html.actionlink("back 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         </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 need add legend top. how color each of these equal 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> 

as @kai's suggests can output status class follows in 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 within css follows:

tr.active {     color:green; } tr.deferred {     color:grey; } tr.closed {     color:red; } 

jsfiddle