Validation via Javascript

2

In my application that manages Courses , I'm in need of a validation via javascript . I have a screen where student signs up for a particular course, what I wanted is that when he clicks the signup button, the Enrollment completed successfully , and the other is when you try to sign up for the same course, you should see the message You are already enrolled in this course in this box. I tried to do it in function Alerta but my message only drops to else . Can anyone help me?

My View

@model IEnumerable<MeuProjeto.Models.Curso>

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

<span class="pull-right">
    @using (Html.BeginForm("Inscricao", "Curso", FormMethod.Get))
    {
        <p>
            Pesquisar Curso: @Html.TextBox("pesquisar")
            <input type="submit" value="Pesquisar" class="btn btn-primary" />
        </p>
    }
</span>

<table class="table table-hover">
    <tr>
        <th>
            Curso
        </th>
        <th>
            Sigla
        </th>
        <th>
            Ementa
        </th>
        <th>
            Inicio
        </th>
        <th>
            Fim
        </th>
        <th>
            Carga Horária
        </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.Carga_Horaria)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Turno)
            </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>
      <--! TENTEI FAZER ASSIM, MAS SÓ ME APARECE A MENSAGEM DO ELSE -->
        function Alerta() {

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

}

My Action Inscription

    [HttpPost]
    public ActionResult Inscricao(int inscricaoId, string pesquisar)
    {
        using (var scope = new TransactionScope())
        {
            //Aqui pega o usuario logado
            Aluno aluno = db.Alunos.FirstOrDefault(a => a.Usuario == User.Identity.Name);
            if (aluno == null)
                return View("MeusCursos");

            //Aqui pega o curso selecionado
            var curso = db.Cursos.FirstOrDefault(c => c.Id == inscricaoId);
            if (curso == null)
                return View("MeusCursos");

            //Aqui verifica se o aluno já está inscrito em algum curso
            var alunoCurso = db.AlunoCursos.FirstOrDefault(ac => ac.Curso.Id == inscricaoId && ac.Aluno.Usuario == User.Identity.Name);
            if (alunoCurso != null)
            {
                return RedirectToAction("Inscricao", "Curso");
            }

            //Aqui faz a associação do Aluno e Curso
            alunoCurso = new AlunoCurso
            {
                Aluno = aluno,
                Curso = curso
            };

            db.AlunoCursos.Add(alunoCurso);
            db.SaveChanges();

            //Aqui decrementa a quantidade de vagas dos Cursos
            curso.Qtd_Vagas--;
            db.Entry(curso).State = EntityState.Modified;
            db.SaveChanges();

            scope.Complete();
        }

        var cursos = from c in db.Cursos select c;

        if (!String.IsNullOrEmpty(pesquisar))
        {
            cursos = cursos.Where(c => c.Nome_Curso.Contains(pesquisar));
        }
        cursos = cursos.OrderBy(a => a.Nome_Curso);

        return View(cursos.ToList());
    }
    
asked by anonymous 03.07.2015 / 15:05

2 answers

1

It is possible to use the success function to solve both problems, in Action "Enrollment" you must keep the current code, adding only a validation to check if the user is already registered for that course, if he is not registered as it was doing before and return a JSON object at the end warning that the registration was done.

In the Action part what will change is the return, as it is a register via AJAX before you did not return anything, but it is possible to return a JSON object, defining an attribute of your choice and the value of it, such object can be consulted in the AJAX function success, performing the necessary logic based on it.

To solve your problem we will return an attribute called 'success', if the value is 'true' the user has been registered, if it is 'false' because it is already registered in the course,

Return Json na Action

public ActionResult Inscricao(/*seus parametros*/ ){
/*coloque aqui o código para enviar a view de inscrição com seus parametros*/
    return View();
}



//essa Action deve ser usada somente por Ajax para conferir o cadastro
[Http.Post]
public ActionResult Inscreve(int InscricaoID){
    if(/* crie um código para validar se já está no curso*/){
          return Json( new {success = "false"});
    }
    else{
       /* coloque aqui o seu código atual de cadastro */
         return Json( new {success = "true"});
    }    
}

javascritp code for ajax

 <script>
        $(document).ready(function() {
            $(".inscricao").click(function() {
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("Inscreve")",
                    data: { inscricaoId: $(this).data("inscricaoid") },
                    success: function(objetoJson) {
                        if(objetoJson.success == true)
                           alert('O cadastro foi realizado com sucesso!');
                        else
                           alert('Você já está inscrito nesse Curso');
                    }
                });
            });
        });
    </script>

So by working with json objects in the Action response and analyzing these responses in the AJAX success function you can solve this problem.

    
03.07.2015 / 15:34
1

I saw the doubt in the comments above and I decided to reinforce the saying by our friend @Fernando Medeiros in his own code!

In your script tag in your success you will make the following change:

<script>
    $(document).ready(function() {
        $(".inscricao").click(function() {
            $.ajax({
                type: "POST",
                url: "Inscricao/",
                data: { inscricaoId: $(this).data("inscricaoid") },
                success: function(data) {
                     /*se o seu retorno dentro do JSON for true quer dizer que está tudo OK! então será efetuado o redirect! Certo ?*/
                     if(data == true) {
                         alert("usuario cadastrado com sucesso :D");
                         window.location.reload();
                     }
                     /*Já se o mesmo vier como falso ele não entrá no if será exibido o alerta para seu usuário!*/
                     alert("você já está inscrito nesse curso")
                }
            });
        });
    });
</script>

Now let's change your action ..

[HttpPost]
public ActionResult Inscricao(int inscricaoId, string pesquisar)
{
    using (var scope = new TransactionScope())
    {
        //Aqui pega o usuario logado
        Aluno aluno = db.Alunos.FirstOrDefault(a => a.Usuario == User.Identity.Name);
        if (aluno == null)
            return View("MeusCursos");

        //Aqui pega o curso selecionado
        var curso = db.Cursos.FirstOrDefault(c => c.Id == inscricaoId);
        if (curso == null)
            return View("MeusCursos");

        //Aqui verifica se o aluno já está inscrito em algum curso
        var alunoCurso = db.AlunoCursos.FirstOrDefault(ac => ac.Curso.Id == inscricaoId && ac.Aluno.Usuario == User.Identity.Name);
        if (alunoCurso != null)
        {
            /*Aqui vamos retornar o JSON para seu javascript mostrar o alert fora do if vamos retornar um false para o mesmo*/
            return new JsonResult() { Data = false, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

        //Aqui faz a associação do Aluno e Curso
        alunoCurso = new AlunoCurso
        {
            Aluno = aluno,
            Curso = curso
        };

        db.AlunoCursos.Add(alunoCurso);
        db.SaveChanges();

        //Aqui decrementa a quantidade de vagas dos Cursos
        curso.Qtd_Vagas--;
        db.Entry(curso).State = EntityState.Modified;
        db.SaveChanges();

        scope.Complete();
    }

    /*E para finalizar ao invés de retonar uma nova view para seu ajax vocÊ vai retornar um json confirmando que o mesmo foi salvo com sucesso, sua aplicação mostrará o alert e depois recarregara sua pagina*/
    /*Vale também lembrar que no data onde retorno false pode ser retornado varias outras informações como um objeto ou string .. que pode ser tratada pelo seu javascript :D*/
    return new JsonResult() { Data = true, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

OBS: The implementation is the same as our friend @Fernando Medeiros

I hope I have helped: D

    
14.08.2015 / 02:32