IF issues in javascript

Question

IF issues in javascript

Navigation

#1 by (1 votes)

7

I'm a beginner in Asp.Net MVC, and I'm developing an application that manages Courses and in my sign up screen I'm trying to validation javascript that if the student is already enrolled in a course and he tries to enroll again in that course, a popup javascript with the message You are already enrolled in this Course . The other validation is when the number of places reaches zero , the status of the course should change to < strong> Closed instead of staying as Available Course . I tried to do this:

View Enrollment

@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 Alerta() {
            var val = document.getElementsByClassName("inscricao").value;

            if (val != null) {
                alert("Cadastro realizado com Sucesso!");
            } else {
                alert("Você já está cadastrado nesse Curso!");
            }
        }
    </script>
    <script>
        function Status() {
            var st = document.getElementsByClassName("inscricao").value;

            if (st != "Curso Disponível") {
                st = "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>
}

javascript asp.net-mvc asp.net-mvc-5

asked by anonymous 29.06.2015 / 18:34

1 answer

Loop overload with foreach use [closed] How do I know if a feature is in the browser cache?

score 1 · Answer 1

Rookie. I agree with Cigano, the ideal is to make an ajax request to the server and check if the course is available or not.

Before going into detail on how to do this, it's worth explaining the reason for the problem you are experiencing.

The document.getElementsByClassName("inscricao") method will return an array of html elements, not a specific element. Whenever you use this method, even if you only check an element in the DOM with this class, always enter the index of the array. Ex. document.getElementsByClassName("inscricao")[0].value

As you did not enter the index of the array, the value of the variable val will always be undefined .

One way to get the value of the element that received the click would be like this:

$(".inscricao").click(function() {
    var val = $(this).val();
    if (!val)
    {
        alert("Cadastro realizado com Sucesso!");
    } 
    else 
    {
        alert("Você já está cadastrado nesse Curso!");
    }

});

To do the validation as suggested by Gypsy you could do something like this:

JavaScript

<script>
    $(document).ready(function() {
        $(".inscricao").click(function() {
            $.ajax({
                type: "POST",
                url: "/Inscricao",
                data: { inscricaoId: $(this).data("inscricaoid") },
                success: function(retorno) {
                    alert(retorno);
                }
            });
        });
    });
</script>

C # (Controller)

public class InscricaoController : Controller
{

    public ActionResult Index(int inscricaoId)
    {
        string mensagem = "";

        if (ValidarInscricao(inscricaoId))
        {
            MetodoParaFazerAInscricao();
            mensagem = "Cadastro realizado com Sucesso!"
        }
        else
        {
            mensagem = "Você já está cadastrado nesse Curso!";
        }

        return Json(mensagem);
    }

}