Disable a button in ASP.NET MVC

1

I'm developing an application that manages course enrollments, I'm still apprentice in ASP.NET MVC, and I have the following question:

In my course screen there is an "enroll" button for the courses listed on this screen. I would like to know how do I disable the button when the user subscribes, that is, click on "subscribe" and also not allow him to enroll again in the same course.

Detail:Thisbuttonalsodecreasesthenumberofplaces.

Followthedecrementcode.

publicActionResultConfirmacao(int?id){using(varscope=newTransactionScope()){Cursocurso=newCurso();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();}returnView(db.Cursos);}

HereAjaxwhereIcallAction

<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>
}
    
asked by anonymous 02.06.2015 / 20:26

1 answer

2

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, id attributes must be unique . It's the way we have to uniquely identify a component of your screen. So inserting into a foreach multiple buttons with the same id is wrong.

Switch:

<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" />
...

By:

<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 can have several classes.

As you are using Ajax, just use a callback for the success event, changing the old id to 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 .inscricao selector here .

    
02.06.2015 / 20:37