Status with colors in gridview asp.net C #

0

I need to make the texts of the exam statuses of an app appear in different colors, in the case of black, marked green and not red, these statuses 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>
        }
    
asked by anonymous 14.10.2016 / 07:57

1 answer

0

I would do so:

Create CSS classes for each status:

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

Then in foreach I 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 use the class attribute to use <font color="@cor">@exame.StatusExame.ToString()</font> in this case by 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;
       }
    
14.10.2016 / 15:03