1

Estou desenvolvendo uma aplicação que gerencia inscrições em cursos, ainda sou aprendiz no asp.net MVC, e estou com a seguinte dúvida:

Na minha tela de cursos tem um botão de "inscrição" para os cursos listados nessa tela. Gostaria de saber como eu faço para desabilitar o botão quando o usuário se inscrever, ou seja, clicar em "inscrição" e também não permitir a inscrição dele novamente no mesmo curso.

Lista de Cursos

Detalhe: Esse botão também decrementa a quantidade de vagas.

Segue código do decremento.

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

Aqui o Ajax onde chamo a 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>
}

1 Resposta 1

3

Aqui tem um problema enorme:

        <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>

Pela definição do HTML, atributos id devem ser únicos. É a maneira que temos para identificar unicamente um componente da sua tela. Portanto, inserir dentro de um foreach vários botões com o mesmo id está errado.

Troque:

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

Por:

<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 é o atributo HTML usado para identificar componentes da tela com alguma característica em comum, e que pode ser repetido livremente. Um componente pode ter, inclusive, várias classes.

Como você está usando Ajax, basta usar um callback para o evento success, trocando o antigo id por 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>

Veja mais sobre o seletor .inscricao aqui.

7
  • Não funcionou @Cigano, é só acrescentar esse trecho de código abaixo?
    – Novato
    2/06/2015 às 18:52
  • Não. Você precisa readequar o código à necessidade da sua tela, testar, verificar se o callback é acionado. 2/06/2015 às 19:33
  • Você tem algum exemplo? Pra eu ter uma noção de como fazer?
    – Novato
    2/06/2015 às 19:57
  • Coloque na sua pergunta o HTML do Razor, por favor. Só assim eu posso ter uma ideia de como ativar o botão corretamente. 2/06/2015 às 20:34
  • Coloquei o HTML @Cigano.
    – Novato
    3/06/2015 às 2:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .