Changing the status of a field with Javascript

Question

I am developing an application that manages Courses, am beginner in Asp.net MVC. In my application I have a screen that the Pupil makes his Inscription in a course, I also have a field Number of Vacancies and another field Status that says if the course is Available or Closed, What I’m trying to do is: When mine Amounts of vacancies come to zero the Status course should change to Closed. I don’t know if with javascript would be the best way to do it. The way I tried is wrong and it doesn’t work. Someone can help me?!

My View

@model IEnumerable<MeuProjeto.Models.Curso>

<style>
    #Status {
        display: block;
        text-align: center;
    }

    .encerrado {
        background-color: green;
        font-family: 'Times New Roman';
        color: white;
    }

    .disponivel {
        background-color: orange;
        font-family: 'Times New Roman';
        color: white;
    }

</style>

<h2>Catálogo de Cursos</h2>

<table class="table table-hover">
    <tr>
        <th>
            Curso
        </th>
        <th>
            Sigla
        </th>
        <th>
            Ementa
        </th>
        <th>
            Inicio
        </th>
        <th>
            Fim
        </th>
        <th>
            Turno
        </th>
        <th>
            Status
        </th>
        <th>
            Quantidade de Vagas
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
           <td>
                @Html.DisplayFor(modelItem => item.Nome_Curso)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sigla)
            </td>
            <td>
                <a href="~/Curso/[email protected]">Ementa</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Dt_Inicio)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Dt_Fim)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Turno)
            </td>
            <td>
                <input type="text" name="Status" id="Status" value="@Html.DisplayFor(modelItem => item.Status)" readonly class="Status" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Qtd_Vagas)
            </td>
            <td>
               <div class="btn-group">
                    <div class="col-md-offset-2 col-md-10">
                        @using (Html.BeginForm("Inscricao", "Curso", FormMethod.Post))
                        {
                            if (item.Qtd_Vagas > 0)
                             {
                                 <a class="inscricao btn btn-success" onclick="$(this).parents('form').submit(), Alerta()">Inscrição</a>
                                 <input type="hidden" value="@item.Id" name="inscricaoId" />
                             }
                            else
                            {
                                 <input type="submit" value="Não há vagas" name="detalhes" class="inscricao btn btn-default" disabled="disabled"/>
                            }
                        }
                    </div>
                </div>
            </td>
        </tr>

    }

</table>
<div class="form-group">

    <a href="@Url.Action("HomeAluno", "Home")"><input type="button" value="Voltar" class="btn btn-danger" /></a>

</div>
<br />


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function() {
            $(".inscricao").click(function() {
                $.ajax({
                    type: "POST",
                    url: "Inscricao/",
                    data: { inscricaoId: $(this).data("inscricaoid") },
                    success: function() {
                        window.location.reload();
                    }
                });
            });
        });
    </script>
    <script>
        function Status() {
            var st = document.getElementsByClassName("Status").value;

            if (st == document.getElementsByClassName("disponivel")) {
                return st;
            } else {
                return document.getElementsByClassName("encerrado");
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            $('.Status').each(function() {
                if ($(this).val() == "Curso Disponível") {
                    $(this).addClass("disponivel");
                }
                if ($(this).val() == "Encerrado") {
                    $(this).addClass("encerrado");
                }
            });
        });
    </script>
}

Answer 1

I believe there’s a logic flaw in your code, because by analyzing your razor you always use the item.Status, then it means he’s always Available. You need to change your code for when you’re with 0 vacancies you change the value of your item.Status for Closed and saved on the bench.

That way when you update your screen will always catch the item.Status correct.

As a last resort you can do something like this:

<td>
    @if (item.Qtd_Vagas > 0) 
    {
         <input type="text" name="Status" id="Status" value="Curso Disponível" />
    } 
    else 
    {
         <input type="text" name="Status" id="Status" value="Curso Encerrado" />
    }
</td>

But I still think wrong that way.