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>