How to use JSON on Asp.net MVC

Question

I’m a beginner in Asp.Net MVC, and I’m developing an application that manages Courses and on my screen of enrollment I’m trying to do a validation that case the pupil is already registered in a course and he tries to enroll again in that same course, a message must appear You are already enrolled in this Course. The other validation is when the number of vacancies come to zero, the course status must change to Closed instead of being like Course Available. Told me to use JSON but I still don’t know how to use it, someone can help me!?

My View Registration

@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>
        $(document).ready(function() {
            $('.Status').each(function() {
                if ($(this).val() == "Curso Disponível") {
                    $(this).addClass("disponivel");
                }
                if ($(this).val() == "Encerrado") {
                    $(this).addClass("encerrado");
                }
            });
        });
    </script>
}

Action Registration of controller Curso

public ActionResult Inscricao(string pesquisar)
    {
        Aluno aluno = db.Alunos.FirstOrDefault(a => a.Usuario == User.Identity.Name);
        if (aluno == null)
            return View("MeusCursos");

        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());
    }

    [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");

            if (curso.Qtd_Vagas <= 0)
            {
                //TempData["MensagemErro"] = "Não existem mais vagas para este curso.";
                return RedirectToAction("Inscricao");
            }

            //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)
            {
                //TempData["Erro"] = "Aluno já está inscrito no curso.";
                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());
    }

Answer 1

The code is good. We just have to enrich the interface.

Let’s change this code:

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

In the documentation on .ajax() jQuery, we have to the function success (one callback) has three parameters:

success
Type: Function( Anything data, String textStatus, jqXHR jqXHR )

The return of a Action is filled in data, so let’s use data to get the information we want. First I will change the Javascript, and the change should be clearer when I explain the code of the Action:

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

Let’s change now your Action:

[HttpPost]
public JsonResult Inscricao(int inscricaoId)
{
    using (var scope = new TransactionScope())
    {
        //Aqui pega o usuario logado
        var aluno = db.Alunos.FirstOrDefault(a => a.Usuario == User.Identity.Name);
        if (aluno == null)
            return Json(new { Mensagem = "Aluno não encontrado." }, JsonRequestBehavior.AllowGet);

        //Aqui pega o curso selecionado
        var curso = db.Cursos.FirstOrDefault(c => c.Id == inscricaoId);
        if (curso == null)
            return Json(new { Mensagem = "Curso não encontrado." }, JsonRequestBehavior.AllowGet);

        if (curso.Qtd_Vagas <= 0)
        {
            //TempData["MensagemErro"] = "Não existem mais vagas para este curso.";
            return Json(new { Mensagem = "Não existem mais vagas para este curso." }, JsonRequestBehavior.AllowGet);
        }

        //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)
        {
            //TempData["Erro"] = "Aluno já está inscrito no curso.";
            return Json(new { Mensagem = "Aluno já está inscrito no curso." }, 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();
    }

    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 Json(new { Mensagem = "Ok!" }, JsonRequestBehavior.AllowGet);
}

Note that I have exchanged all returns as action for Jsons. The idea is to return the appropriate error message for each check.

Now is to adapt the code to your needs.