2

Como chamar uma modal pelo ActionResult do Controller, após o usuário clicar no botão para se cadastrar?

Atualmente o controller está redirecionando para a página index após o usuário se cadastrar. Quero que no lugar de redirecionar, chamar a modal que está na view, pois na modal vou colocar um botão para direcional para o index.

Contoller:

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Create([Bind(Include = "Id,Nome,Email,Senha")] Pessoas pessoas)
{
    if (ModelState.IsValid)
    {                   
        db.Pessoas.Add(pessoas);
        db.SaveChanges();                
        return Json("s");
    }    
        return Json("n");
    }

Ajax:

<script>
    $(".cadastroajax").click(function () {
        var id = $(this).attr("rel");
        $.ajax({
            dataType: "json",
            type: "POST",
            url: "/Pessoas/Teste",
            data: { id },
            success: function () {                                   
            location.reload();
            }
        });
    });
</script>

View:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group col-sm-12">
                @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-sm-6">
                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })                
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-sm-6">
                @Html.LabelFor(model => model.Senha, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.Senha, new { htmlAttributes = new { @class = "form-control", @maxlength = "32" } })                
                @Html.ValidationMessageFor(model => model.Senha, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-sm-12">
                <div class="botao-salvar">
                    <a class="btn btn-danger" href="@Url.Action("Index", "Pessoas")" role="button">
                        Cancelar
                    </a>
                    <button type="submit" value="Create" class="btn btn-success cadastroajax">
                        Cadastrar
                    </button>
                </div>
            </div>
}

<!-- Modal -->
    <div class="modal fade" id="modalSucesso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Sucesso!</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Cadastro efetuado com sucesso.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>                    
                </div>
            </div>
        </div>
    </div>

1 Resposta 1

3

Você pode fazer esse request via ajax e ao invés de retornar a view no actionresult, retornar só um json indicando se deu sucesso ou não algo como { success: true }. e no retorno do ajax mostrar o modal via javascript usando o bootstrap.js $('#modalSucesso').modal('show');

outra opcão seria retornar o html do seu modal como partial view e adicionar ele com .load() no DOM. nesse caso você teria que tirar a classe CSS fade do modal

2
  • Consegui fazer o request via ajax, está funcionando. Só que consegui apenas retornar a mensagem "s", após clicar no botão Cadastrar. Não entendi onde coloco o Id da modal para chamar-lá 25/10/2018 às 20:39
  • 1
    Então, no success, ao invés de dar location.reload() chama o $('#modalSucesso').modal('show');
    – rcarubbi
    26/10/2018 às 9:37

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 .