Submit the form within a modal view redirects me to the view page

Question

I have an MVC project. A View Home/Index charges the View Usuarios/Create in the form of a bootstrap modal. However, my <input type="submit" /> redirects me to the view address Usuarios/Create. I wanted application to stay in View Home/Index with the modal open. How can I do this?

This is the code of my View Usuarios/Create which is carried as modal in Home/Index:

@model Project.Models.Usuario

@{
    Layout = null;
    ViewBag.Title = "Create";
}


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

<div class="modal-dialog modal-dialog-centered modal-md">
    <div class="modal-content">

        <div class="modal-header">
            <h4 class="modal-title">CADASTRO</h4>
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        </div>
        <div class="modal-body">

            <div class="row">
                <div class="col col-12">Seu nome: @Html.TextBoxFor(model => model.Nome, new { @class = "campo" })</div>
                @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
            </div>

            <div class="row">
                <div class="col col-12">Seu melhor email: @Html.TextBoxFor(model => model.Email, new { @class = "campo" })</div>
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>

            <div class="row">
                <div class="col col-12">Defina sua senha: @Html.PasswordFor(model => model.Senha, new { @class = "campo" })</div>
                @Html.ValidationMessageFor(model => model.Senha, "", new { @class = "text-danger" })
            </div>

            <div class="row">
                <div class="col col-12">Digite a senha novamente: <input type="password" name="name" value="" class="campo" /></div>
            </div>

            <div class="row">
                <div class="col col-12"><input type="submit" name="cadastrar" value="CADASTRAR" class="botao botao-principal" /></div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>

    </div>
</div>
}

And that’s how I open the modal in Home/Index:

<div class="modal fade" id="modal"></div>
<script>
    $(function () {
        $(".cadastrar").click(function () {
            $("#modal").load("../Usuarios/Create", function () {
                $("#modal").modal();
            })
        });
    })
</script>

Answer 1

You can direct the post on your page by telling where it goes when you give Ubmit.

@Html.BeginForm("YOUR_ACTION_NAME", "YOUR_CONTROLLER_NAME", FORM_METHOD)

This method has several overloads, but let’s go to the most common Actionname - Name of the action to be executed. Controllername - Name of the controller to be executed. Formmethod - Specifies the form the data will be sent, through POST or GET.

Example:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
}