Color status in gridview Asp.net C#

Question

I need to make the text of the exam status of an app appear in different colors, in case wait black, marked green and not performed in red, these status are in an Enum. Follow my code, if anyone knows the best way for this implementation.

                                      @model List<Phil.Odontomedicas.Core.ExameSolicitado>
            @{
            ViewBag.Title = "Exames Solicitados";
              }
            <div class="well">
           @using (Html.BeginForm("Filtrar", "Home", FormMethod.Get))
              {
                @Html.Partial("_Filters")
               }
          </div>
           <div class="panel panel-default">
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-lg-12">
                     <table class="table table-striped dataTables_wrapper form-inline dt-bootstrap" id="grdExames">
                          <thead>
                          <tr>
                          <td>Dentista</td>
                          <td>Paciente</td>
                          <td>Telefone Paciente</td>
                          <td>Data Solicitação</td>
                          <td>Cupom</td>
                          <td>Status</td>
                          <td>Exame</td>
                          <td>Detalhes Exame</td>
                          <td>Marcado/Realizado/Não Marcado</td>
                           </tr>
                         </thead>
                       <tbody>
                          @foreach (var exame in Model.OrderByDescending(x => x.DataSolicitado))
                          {
                        <tr>
                            <td>@exame.Dentista.Nome</td>
                            <td>@exame.Paciente.Nome</td>
                            <td>@exame.Paciente.Telefone</td>
                            <td>@exame.DataSolicitado.ToString("dd/MM/yyyy")</td>
                            <td>@exame.Cupom</td>
                            <td>@exame.StatusExame.ToString()</td>
                            <td>@exame.ExameTitulo</td>
                            <td><button class="btn btn-sm detalhe-exame btn-default" data-detalhe="@exame.DadosExame" data-toggle="modal" data-target="#myModal">Detalhes Exame</button></td>
                            <td><button class="btn btn-sm btn-success" data-id="@exame.Id" data-tipo="1" onclick="GravarExame(this,event)"><i class="fa fa-check"></i></button> <button class="btn btn-sm btn-success" data-id="@exame.Id" data-tipo="4" onclick="GravarExame(this,event)"><i class="fa fa-check-square"></i></button> <button class="btn btn-sm btn-danger" data-id="@exame.Id" data-tipo="3" onclick="GravarExame(this,event)"><i class="fa fa-times"></i></button></td>
                        </tr>
                    }
                      </tbody>
                     </table>
                  </div>
                 </div>
                 </div>
              </div>
                            <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                               <div class="modal-dialog">
                               <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                              <h4 class="modal-title">Descrição Exame</h4>
                               </div>
                              <div class="modal-body" id="modalDescricao">

                             </div>
                        </div><!-- /.modal-content -->
                   </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                               @section Javascript{
                                   <script type="text/javascript">
                              function GravarExame(elemento, event) {
                                     event.preventDefault();
                        var elemId = $(elemento).attr("data-id");
                        var elemTipo = $(elemento).attr("data-tipo");


        $.ajax({
            type: 'POST',
            url: '@Url.Content("~/Home/Atualizar")',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            data: "{'Id':'" + elemId + "','StatusExame':" + elemTipo + "}",
            success: function (data) {
                alert(data);
                location.reload();
            },
            error: function (error) {
                alert("Ocorreu um erro, entre em contato com o desenvolvedor!");
            }
        });
    }

    $(document).ready(function () {
        $('.detalhe-exame').on("click", function () {
            var detalhes = $(this).attr("data-detalhe");
            $('#modalDescricao').html("");
            $('#modalDescricao').html(detalhes);
        });

        $("#grdExames").DataTable({
            searching: false,
            ordering: false,
            "language": {
                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar",
                "oPaginate": {
                    "sNext": "Próximo",
                    "sPrevious": "Anterior",
                    "sFirst": "Primeiro",
                    "sLast": "Último"
                           },
                "oAria": {
                    "sSortAscending": ": Ordenar colunas de forma ascendente",
                    "sSortDescending": ": Ordenar colunas de forma descendente"
                }
            }
        });
    });
</script>
        }

Answer 1

I would do so:

Create CSS classes for each status:

<style>
    .preto { /* definições aqui */ }
    .vermelho {  /* definições aqui */ }
    .verde { /* definições aqui */ }
</style>

So in foreach would make a switch.

@foreach (var exame in Model.OrderByDescending(x => x.DataSolicitado))
{
   string classe = "";
   switch(exame.StatusExame)
   {
     case Status.Espera : classe = "preto"; break;
     case Status.Marcado : classe = "verde"; break;
     case Status.NaoRealizado : classe = "vermelho"; break;
     default : break;
   }

   .....
   <td class="@classe">@exame.StatusExame.ToString()</td>
}

You could also instead of using the attribute class utilise <font color="@cor">@exame.StatusExame.ToString()</font> in this case changing the switch:

       string cor = "";
       switch(exame.StatusExame)
       {
         case Status.Espera : cor = "#000000"; break;
         case Status.Marcado : cor = "#008000"; break;
         case Status.NaoRealizado : cor = "#FF0000"; break;
         default : break;
       }