ASP .NET Core :  Toast Notification

  Hoje veremos como melhorar a experiência do usuário adicionando Notificações Toast na ASP.NET Core.

Ao invés de usar javascript e arquivos de estilo para implementar notificações agora podemos integrar nativamente bibliotecas javascript na ASP.NET Core de forma a gerar notificações.

Mas o que vem a ser esse tal recurso de notificação  'Toast' ?

A palavra toast é traduzida como brinde mas 'Toast' neste contexto refere-se a um recurso de interface do usuário em que um evento faz com que uma pequena caixa de texto apareça na parte inferior da tela. O comportamento parece um pedaço de pão saltando de uma torradeira.

As notificações toast surgiram com o sistema operacional Android, mas devido a sua forma genial de mostrar uma notificação dentro de um aplicativo, surgiram em outras plataformas como ASP.NET Core. Abaixo está uma captura de tela de como podem ser as notificações do sistema:

Existem alguns pacotes nugets disponíveis que podemos usar para fazer a integração com a ASP .NET Core de forma simples e objetiva.

Emitindo notificações na ASP.NET Core MVC

Vamos criar um projeto ASP.NET Core MVC chamada MvcToast para mostrar como invocar essas notificações do sistema.

Neste exemplo vou usar o pacote AspNetCoreHero.ToastNotification, que pode ser instalado no projeto usando o comando:
Install-Package AspNetCoreHero.ToastNotification

Apos a instalação, podemos abrir qualquer página onde desejamos exibir notificações.  Vamos abrir a página Index.cshtml da pasta Home e vamos incluir o seguinte código nesta página:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

@await Component.InvokeAsync("Notyf")

<form method="post" asp-controller="Home" asp-action="Index">
    <div class="text-center">
      <button class="btn btn-success" name="submit" value="Success">Toast Success</button>
      <button class="btn btn-primary" name="submit" value="Info">Toast Info</button>
      <button class="btn btn-danger" name="submit" value="Error">Toast Error</button>
      <button class="btn btn-warning" name="submit" value="Warning">Toast Warning</button>
    </div>
</form>

Neste código adicionamos o arquivo jquery e o css necessário e a seguir definimos o componente de visualização que registra o Toast com o nome de Notyf:

@await Component.InvokeAsync(“Notyf”)

A seguir criamos vários botões que podem enviar a solicitação POST para o Home Controller.

Agora vamos ativar a notificação toast na classe Program adicionando o middleware ao container de serviço :

...
builder.Services.AddControllersWithViews();

builder.Services.AddNotyf(config =>
{
   config.DurationInSeconds = 10;
   config.IsDismissable = true;
   config.Position = NotyfPosition.BottomRight;
});
 

Aqui adicionamos os serviços de notificação Toast onde definimos uma configuração básica usando o método AddNotfy que permite gerenciar a duração, a posição da notificação,etc.

- DurationInSeconds - permite configurar o tempo de fechamento da notificação;
- IsDismissable - permite descartar a notificação ou não;
- Position - permite que você defina a notificação vai aparecer.

Para concluir vamos configurar a ativação da notificação toast adicionando o middleware ao contêiner de serviço:

app.UseRouting();

app.UseAuthorization();

app.UseNotyf();
...

Com isso estamos prontos para emitir notificações e como exemplo vamos modificar o código do controlador HomeController conforme abaixo:

using AspNetCoreHero.ToastNotification.Abstractions;
using Microsoft.AspNetCore.Mvc;

namespace MvcToast.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
private readonly INotyfService _notyfService;
public HomeController(ILogger<HomeController> logger,
INotyfService notyfService)
{
_logger = logger;
_notyfService = notyfService;
}
public IActionResult Index()
{
_notyfService.Success("Dados salvos com sucesso.");
_notyfService.Error("Ocorreu um erro...");
_notyfService.Warning("Alerta...");
_notyfService.Information("Bem-Vindo ao NET 7.0.", 10);
return View();
}

[HttpPost]
public IActionResult Index(string submit)
{
switch (submit)
{
case "Success":
_notyfService.Success("Dados salvos com sucesso.");
break;
case "Info":
_notyfService.Information("Bem-Vindo ao NET 7.0..", 5);
break;
case "Error":
_notyfService.Error("Ocorreu umerro...");
break;
case "Warning":
_notyfService.Warning("Alerta...");
break;
}
return View();
}
}
}

 

Executando o projeto iremos obter o resultado a seguir:

Podemos também personalizar a notificação do sistema usando o código a seguir:

_notyfService.Custom("Notificação personalizada...", 10, "#B500FF", "fa fa-home");

Pegue o projeto aqui:    MvcToast.zip...

"Portanto, nada julgueis antes de tempo, até que o Senhor venha, o qual também trará à luz as coisas ocultas das trevas, e manifestará os desígnios dos corações; e então cada um receberá de Deus o louvor."
1 Coríntios 4:5

Referências:

José Carlos Macoratti