Disable a button on Asp.net MVC

Question

I am developing an application that manages enrollment in courses, I am still an apprentice at Asp.net MVC, and I have the following question:

On my course screen is a "registration" button for the courses listed on this screen. I would like to know how I do to disable the button when the user signs up, IE, click on "registration" and also not allow registration again in the same course.

Detail: This button also decreases the number of vacancies.

Follows code of decrement.

public ActionResult Confirmacao(int? id)
    {
        using (var scope = new TransactionScope())
        {
            Curso curso = new Curso();

            curso = db.Cursos.Include(x => x.Aluno).AsNoTracking().FirstOrDefault(f => f.Id == id);

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

            scope.Complete();
        }


        return View(db.Cursos);
    }

This is Ajax where I call Action

<script>
    $(document).ready(function() {
        $("#inscricao").click(function() {
            $.ajax({
                type: "POST",
                url: "~/Curso/Confirmacao/" + $(this).attr("Qtd_Vagas")
            });
        });

    });
</script>

HTML Razor

@model IEnumerable<MeuProjeto.Models.Curso>

<h2>Lista 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>
                @Html.DisplayFor(modelItem => item.Ementa)
            </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">
                        <a href="@Url.Action("Inscricao", "Curso")"><input type="submit" value="Inscrição" id="inscricao" name="inscricao" class="btn btn-success" data_toggle ="modal", data_target="#modalaviso" /></a>
                    </div>
                </div>
            </td>
        </tr>

    }

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

    <a href="@Url.Action("Index", "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: "~/Curso/Inscricao/" + $(this).attr("Qtd_Vagas"),
                    success: function() {
                        $(this).attr("disabled", "disabled");
                    }
                });
            });

        });
    </script>
}

Answer 1

Here’s a huge problem:

        <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" id="inscricao" name="inscricao" class="btn btn-success" data_toggle ="modal", data_target="#modalaviso" /></a>
                </div>
            </div>
        </td>

By HTML definition, attributes id should be unique. It is the way we have to uniquely identify a component of your screen. Therefore, insert within a foreach multiple buttons with the same id is wrong.

Change:

<a href="@Url.Action("Inscricao", "Curso")">
    <input type="submit" value="Inscrição" id="inscricao" name="inscricao" class="btn btn-success" data_toggle ="modal", data_target="#modalaviso" />
...

For:

<a href="@Url.Action("Inscricao", "Curso")">
    <input type="submit" value="Inscrição" class="inscricao btn btn-success" name="inscricao" data_toggle ="modal", data_target="#modalaviso" />
...

class is the HTML attribute used to identify screen components with some common feature, and which can be freely repeated. A component may include several classes.

As you are using Ajax, just use one callback for the event success, changing the old id for class:

<script>
    $(document).ready(function() {
        $(".inscricao").click(function() {
            $.ajax({
                type: "POST",
                url: "~/Curso/Confirmacao/" + $(this).attr("Qtd_Vagas"),
                success: function() {
                    $(this).attr("disabled", "disabled"); 
                }
            });
        });
    });
</script>

See more about the selector .inscricao here.