Button only work if you pass the ID in the URL in Asp.net MVC

Question

I’m having a problem with my Courses manager application in Asp.net MVC.

The scenario is as follows: I have a screen where the "Student" makes his registration in a course. By clicking on the "registration" button, it is associated with a course and amount of vacancies of this course will be decreased. The screen Razor is more or less like this:

@foreach (var item in Model)
{
    <tr>
       <td>
            @Html.DisplayFor(modelItem => item.Nome_Curso)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Sigla)
        </td>
        ...
        <td>
            <div class="btn-group">
                <div class="col-md-offset-2 col-md-10">
                    <a href="@Url.Action("Inscricao", "Curso")">
                        <input type="submit" value="Inscrição" name="inscricao" class="inscricao btn btn-success" data-toggle ="modal", data-target="#modalaviso" data-inscricaoid="@item.CursoId" /></a>
                </div>
            </div>
        </td>
    </tr>

}

In this case, it only works if I pass the Id as a parameter in the URL. Example: my signup URL is Courses/Registration only this way the button does nothing. Now if I pass the Id parameter it works, like this: Courses/Registration/1.

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function() {
            $(".inscricao").click(function() {
                $.ajax({
                    type: "POST",
                    url: "~/Curso/Inscricao/" + $(this).data("inscricaoid"),
                    success: function() {
                        $(this).attr("disabled", "disabled");
                    }
                });
            });

        });
    </script>
}

I don’t want to keep running the ID through the URL. I need that when the "student" click on the "enrollment" button it is associated to the course and the decreasing vacancies without passing the ID in the URL.

Answer 1

Basically, you are using an Ajax request whose method is POST, but you’re not passing data by POST.

Change to the following:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function() {
            $(".inscricao").click(function() {
                $.ajax({
                    type: "POST",
                    url: "~/Curso/Inscricao/",
                    data: { inscricaoId: $(this).data("inscricaoid") }
                    success: function() {
                        $(this).attr("disabled", "disabled");
                    }
                });
            });

        });
    </script>
}

As the example of Action who answered here, some amendments will be needed:

[HttpPost]
public ActionResult Inscricao(int inscricaoId)
{
    using (var scope = new TransactionScope())
    {

        // Aqui pegaria o aluno logado.
        var aluno = db.Alunos.FirstOrDefault(/* Aqui vai uma condição */);
        if (aluno == null) return View("Inscricao", db.Cursos.ToList());

        var curso = db.Cursos.FirstOrDefault(c => c.Id == inscricaoId);
        if (curso == null) return View("Inscricao", db.Cursos.ToList());

        var alunoCurso = new AlunoCurso {
            Aluno = aluno, 
            Curso = curso}
        };

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

        curso.Qtd_Vagas--;
        db.Entry(curso).State = EntityState.Modified;
        db.SaveChanges();

        scope.Complete();
    }

    return View("Inscricao", db.Cursos.ToList());
}