How to call a modal in the View from the Controller Actionresult

Question

To call a modal from the Controller’s Actionresult, after the user clicks the button to register?

The controller is currently redirecting to the index page after the user registers. I want instead of redirecting, call the modal that is in the view, because in the modal I will put a button to directional to the 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>

Answer 1

You can do this request via ajax and instead of returning the view in actionresult, return only one json indicating whether or not something like { success: true }. and at ajax return show the modal via javascript using bootstrap.js $('#modalSucesso').modal('show');

another option would be to return the html of your modal as partial view and add it with . load() in DOM. in that case you would have to take the CSS class fade modal