2

Tengo un botón que ejecuta una acción bajo HttpPost, al terminar la ejecución de la acción en el controlador, envío un mensaje de confirmación que muestro en la vista, pero al hacerlo recarga la página y después me muestra el mensaje.

¿Hay alguna forma de hacer que me muestre el mensaje sin que se recargue la página?

Aquí está el código que estoy utilizando:

--- Controlador ---

public ActionResult Index()
{
    ViewBag.showSuccessAlert = false;
    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Index(Contacto model)
{
    if (ModelState.IsValid)
    {
        var body = "<p>Correo de: {0} ({1})</p><p>Mensaje: {2}</p>>";
        var message = new MailMessage();
        message.To.Add(new MailAddress("[email protected]"));
        message.From = new MailAddress("[email protected]");
        message.Subject = "Contacto Web";
        message.Body = string.Format(body, model.Nombre, model.Correo, model.Mensaje);
        message.IsBodyHtml = true;

        using (var smtp = new SmtpClient())
        {
            var credential = new NetworkCredential
            {
                UserName = "[email protected]",  
                Password = "pass"
            };
            smtp.Credentials = credential;
            smtp.Host = "smtp-mail.outlook.com";
            smtp.Port = 587;
            smtp.EnableSsl = true;
            await smtp.SendMailAsync(message);

            ViewBag.showSuccessAlert = true;
        }
    }

    return View(model);
}

--- Vista ---

<form>
    <div class="group">
        @Html.LabelFor(m => m.Nombre)
        <br />
        @Html.TextBoxFor(m => m.Nombre, new { @required = "required" })<span class="bar"></span>
        @Html.ValidationMessageFor(m => m.Nombre, null, new { @class = "text-danger" })
    </div>
    <div class="group">
        @Html.LabelFor(m => m.Correo)
        <br />
        @Html.TextBoxFor(m => m.Correo, new { @required = "required" })<span class="bar"></span>
        @Html.ValidationMessageFor(m => m.Correo, null, new { @class = "text-danger" })
    </div>
    <div class="group">
        @Html.LabelFor(m => m.Mensaje)
        <br />
        @Html.TextAreaFor(m => m.Mensaje, new { @required = "required" })<span class="bar"></span>
        @Html.ValidationMessageFor(m => m.Mensaje, null, new { @class = "text-danger" })
    </div>
    @{
        if (ViewBag.showSuccessAlert)
        {

            <div class="group">
                <p class="content-detail">El mensaje ha sido enviado.</p>
            </div>
        }
    }

    <input id="sendMessage" name="sendMessage" type="submit" value="Enviar Mensaje">
</form>
1
  • 3
    Si no quieres recargar la pagina la unica opcion es mandarlo via AJAX. Al recibir la respuesta puedes ensenar el SuccessAlert o un FailAlert
    – Simon
    Commented el 2 jun. 2017 a las 3:33

1 respuesta 1

2

Debes hacerlo vía AJAX. Si estás usando Bootstrap, ya tienes jQuery que te permitirá hacerlo fácilmente, si no lo tienes te lo recomiendo.

Una vez con jQuery, debes capturar el evento del click del botón y evitar que se ejecute la acción por default (enviar el formulario) y a continuación enviar los datos del formulario:

<script>
    $("#sendMessage").on("click", function(event){
        event.preventDefault();

        $.ajax({
            url: "/controlador/Index",
            data: {
                Nombre: $("#Nombre").val(),
                Correo: $("#Correo").val(),
                Mensaje: $("#Mensaje").val()
            },
            type: "post",
            dataType: "json",
            success: function(respuesta){
                // Aquí lo que quieras que suceda si la petición es exitosa
                // por ejemplo:
                $("#successDialog").modal();
            },
            error:function(repuesta){
                // Aquí lo que quieras que suceda si la petición tuvo un error
                $("#errorDialog").modal();
            }
        });
    });
</script>

Te dejo aquí la documentación oficial de jQuery AJAX (en inglés) para que te familiarices con esta herramienta. También esta otra introducción en español.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.