En ciertas ocasiones se requiere mostrar un mensaje después de realizar una acción

Sin embargo en ASP.NET MVC no viene por defecto esta funcionalidad, por lo que habría que incluir al proyecto funcionalidad de terceros.

Gracias a Nuget, desarrolladores pueden generar funcionalidades y compartirlas a la comunidad. Nuget es un administrador de paquetes para .NET, donde cada programador puede obtener o desarrollar funcionalidades compartidas en nuget.org.

Existe miles de paquetes que se pueden adquirir por medio de Nuget, en este caso vamos a instalar un paquete en particular: Flash.Mvc5, desarrollado por Ryan Whitmire, se puede ver el código en https://github.com/rwhitmire/Flash

Para ello, hacemos click con el botón secundario en el proyecto y seleccionamos la opción “Administrar paquetes Nuget…”

En el Administrador de paquetes Nuget, ingresamos a la solapa “Examinar”, luego en el buscador ingresamos la palabra “Flash”. Buscamos el paquete Flash.Mvc5 del autor Ryan Whitmire. Por último presionamos el botón “Instalar”

Aparecerá una ventana de confirmación y presionamos el botón “Aceptar”

Si ingresamos en el código del paquete en https://github.com/rwhitmire/Flash podemos ver que es una extensión de Request a la que agrega una función llamada Flash. Esta función pide dos parámetros, Type y Message

Request.Flash("success", "it worked!");

Esta función utiliza Session donde va agregando una lista de mensajes, esto permite tener varios mensajes en vez de solo uno. Luego en la vista se recupera esos mensajes y una vez que se utiliza se eliminan los mensajes

@foreach (var flash in Request.GetFlashMessages())
{
    <div>@flash.Type @flash.Message</div>
}

Para brindarle un poco de comodidad a la utilización del Flash en las vistas, también poder adaptarlo a Bootstrap (o cualquier otro framework css) vamos a escribir el código en un Partial View. Para ello hacemos click con el botón secundario en la carpeta Views/Shared y seleccionamos la opción “Agregar->Vista…”

En la ventana “Agregar vista” ingresamos el nombre de la vista “_Flash”, activamos la casilla “Crear como vista parcial” y hacemos click en el botón “Agregar”

En este nuevo archivo ingresamos el siguiente código

@foreach (var flash in Request.GetFlashMessages())
{
    <div class="alert alert-@flash.Type">@flash.Message</div>
}

Se utiliza la clase alert de Bootstrap, con el campo Type de flash completamos el tipo de alerta, como por ejemplo alert-success, alert-warning, alert-danger de Bootstrap

Luego en Views/Shared/_Layout.cshtml, o cualquier otro Layout donde se quera utilizar Flash, se ingresa el siguiente código encima de la función @RenderBody()

@Html.Partial("~/Views/Shared/_Flash.cshtml")
@RenderBody()

Se recomienda utilizar en los Layouts para no insertar Flash en cada vista. Luego en el controlador se utiliza Flash en las acciones que se deseen mostrar un mensaje

[HttpPost]
public ActionResult Agregar(Persona persona)
{
    try
    {
        if (ModelState.IsValid)
        {
            db.Persona.Add(persona);
            db.SaveChanges();

            Request.Flash("success", "Persona agregada correctamente");

            return RedirectToAction("Index");
        }
        else
        {
            Request.Flash("warning", "No se ha podido agregar a la persona");
        }
    }
    catch
    {
        Request.Flash("danger", "Ha ocurrido un error al agregar a la persona");
    }

    return View(persona);
}

El resultado de ejecutar la acción muestra el mensaje que deseamos con el estilo de Bootstrap

Por otro lado puede surgir el caso que se muestren varios mensajes y el contenido de la página se muestre mas abajo.

Se requiere que esos mensajes desaparezcan después de un tiempo o al hacerles click desaparezcan. Esta funcionalidad es mediante código javascript, para ello hacemos click con el botón secundario en la carpeta Scripts y seleccionamos la opción “Agregar -> Archivo JavaScript”

En la ventana que aparece ingresamos el nombre del archivo

Luego ingresamos el siguiente código

$(document).ready(function () {
    $('.alert').click(function () {
        $(this).remove();
    });
});

Esto hace que al hacer click a cualquier elemento que tenga la clase alert sea removido.

Por último agregamos la referencia del archivo javascript en Views/Shared/_Layout.cshtml, en la sección donde se agregan los demás archivos javascript

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")    
    
    <script src="@Url.Content("~/Scripts/Global.js")"></script>
    
    @RenderSection("scripts", required: false)
</body>
</html>

Ya queda listo nuestros mensajes Flash que se eliminan al hacerles click, a partir de ahora pueden cambiarle de estilo, cambiándole las clases o la forma en la que desaparece