User and password validation in Pop Up Modal using MVC 5

Question

My problem is this. I have a modal login pop, as shown below. That when the user enters his login and password and clicks on the login button, he calls mine controller Authenticate. Follow the code of my controller.

[HttpPost]
    public ActionResult Autentica(string login_username, string login_password)
    {
        TSF_USUARIOS usuario = usuarioDAo.BuscaPorLoginSenha(login_username, login_password);

        if(usuario!=null)
        {
            return RedirectToAction("Index","Home");
        }
        else
        {
            ModelState.AddModelError("login.invalido", "Usuário ou senha inválida.");
            return View();//Ainda procurando solução.
        }
    }

If the user enters the correct information will be directed to the home screen, until then everything ok. But if he enters the wrong information, I need to inform a message for him in this Modal, here is my problem, this modal is opened when the user clicks a button in the menu. If I give a Return view();, the popup is closed. I am using bootstrap.js to animate the modal. Is there any way that I can do in the controller returns the open modal and the message that I added in Modelstate? I’ve searched for this information in several forums but in none I could solve my problem.

Follows my Modal:

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" align="center">
                <img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                </button>
            </div>
            <div id="div-forms">
                <form id="login-form" action="/Usuario/Autentica" method="post">
                    <div class="modal-body">
                        <div id="div-login-msg">
                            <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
                            <span id="text-login-msg">Informe seu nome de usuário e senha.</span>
                        </div>
                        <input id="login_username" name="login_username" class="form-control" type="text" placeholder="Login" required>
                        <input id="login_password" name="login_password" class="form-control" type="password" placeholder="Senha" required>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Salvar Senha
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div>
                            <input type="submit" class="btn btn-primary btn-lg btn-block" value="Login" />
                        </div>
                        <div>
                            <button id="login_lost_btn" type="button" class="btn btn-link">Esqueceu a senha?</button>
                            @Html.ActionLink("Registrar", "Cadastro", "Usuario")
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

Modify your method to the following:

[HttpPost]
public JsonResult Autentica(string login_username, string login_password)
{
    TSF_USUARIOS usuario = usuarioDAo.BuscaPorLoginSenha(login_username, login_password);

    if(usuario!=null)
    {
        return Json(new { resultado = "Ok" }, JsonRequestBehavior.DenyGet)
    }

    return Json(new { resultado = "NaoEncontrado" }, JsonRequestBehavior.DenyGet);
}

Modify:

<input type="submit" class="btn btn-primary btn-lg btn-block" value="Login" />

To:

<button id="botao-login">Login</button>

Implement also on View the following:

$("#botao-login").click(function () {
    $.ajax({
        type: "POST",
        url: "@Url.Action("Autentica", "MeuController")",
        data: {
            login_username: $("#login-username").val();
            login_password: $("#login-password").val();
        },
        dataType: "json",
        success: function (data) {
            if (data.resultado == "Ok") {
                window.location.replace("@Url.Action("Sucesso", "MeuController")");
            }

            // Exiba as mensagens de erro neste espaço. 
        }
    });
});

It is important to say that this is not the good way to do this. ASP.NET MVC has its own way of logging in using an authentication framework (preferably Identity). I just didactically showed you how to do, but this way doesn’t really authenticate your user.