Eu preciso fazer com que o textos dos status dos exames de um app apareçam com cores diferentes, no caso espera preto, marcado verde e não realizado em vermelho, esses status estão em um Enum. Segue meu código, se alguém souber a melhor forma para essa implementação.
@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">×</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>
}