Open modal through ActionResult in MVC

Question

Open modal through ActionResult in MVC

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello, I'm building a registration page with MVC .NET and I'm having a hard time. I want to validate the information filled in, if they are correct, I will follow the flow of the application but if not, I want to open a modal jquery warning the user that there is incorrect information. Since I am new to MVC, I still have not been able to do this. I created the div with modal and called it through the click of the button, but I could not put this condition to open only when my post is unsuccessful.

Below is the div with the modal I created.

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <h4>ATENÇÃO!</h4>
                        <p>
                            Existem informações inconsistentes em seu cadastro.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>

javascript jquery html5 asp.net-mvc-5

asked by anonymous 22.10.2017 / 19:39

2 answers

0

I'll try to help you by giving you an example of a validation on the front end:

Form

@using (Html.BeginForm("SuaAction", "SeuController", FormMethod.Post, new {id = "frm" })
{
   <div class="form-group">
        @Html.Label("Nome", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control", @id="nome"} })     
        </div>
    </div>
}

Scripts

@section Scripts {
<script>
    $("#frm").submit(function (event) {
        var inputNome = $('#nome').val();
        if (inputNome == '') {
            $('#myModal').modal('show')
        }
    });
</script>

}

23.10.2017 / 03:22

Object appears when starting (pressing) the OnLongClickListener event and disappears when it finishes (drop) How to install python-yaml?

score 0 · Accepted Answer

So let's go ...

A simple example ...

Contoller:

public ActionResult Login()
{
    return View();
}

[HttpPost]
public ActionResult Login(String user, String senha)
{
    if (user == "user" && senha == "senha")
        //Acesso autorizado
        return RedirectToAction("PaginaUser");
    else
    {
        ViewBag.Message = "Acesso Negado";
        return View();
    }

}

public ActionResult PaginaUser()
{
    return View();
}

View:

<h2>Login</h2>
@if (ViewBag.Message == "Acesso Negado")
{
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4>ACESSO NEGADO!</h4>
                <p>
                    Verifique seu login e senha.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
}

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

<div class="form-horizontal">
    <h4>Login</h4>
    <hr />
    <div class="form-group">
        @Html.Label("Login", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.User, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        @Html.Label("Senha", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Senha, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Login" class="btn btn-default" />
        </div>
    </div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
    $(document).ready(function () {
        $('#myModal').modal('show');
    });
</script>
}