ASP.NET Core MVC - Enviando Notificações
  Neste artigo veremos como enviar notificações toast em aplicações ASP.NET Core MVC.


As notificações toast são avisos emitidos em uma pequena janela pop-up que ocupa pouco espaço que podem ou não desaparecer após alguns segundos.

 


 

Neste artigo, veremos como usar este recurso em aplicações ASP .NET Core MVC usando o pacote Nuget AspNetCoreHero.ToastNotification.

 

Criando e configurando o projeto MVC

 

Vamos criar um projeto no VS 2022 usando o template ASP.NET Core Web App com o nome MvcToastNotification.
A seguir vamos instalar o seguinte pacote no projeto:

A seguir vamos configurar a utilização do recurso incluindo no arquivo _Layout.cshtml da pasta Shared do projeto a linha de código destacada abaixo:

 

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

@await Component.InvokeAsync("Notyf")  //<-

@RenderSection("Scripts", required: false)
 

Podemos definir esta configuração em qualquer página onde você quiser exibir as notificações. Usar o arquivo _Layout.cshtml vai permitir que isso seja feito em todas as páginas do projeto.

Certifique-se de colocar esta linha somente depois de carregar a biblioteca jquery. Dessa forma, adicionamos o componente Toast Notification à nossa View.

A seguir precisamos registrar o serviço no container DI nativo no arquivo Program:

using AspNetCoreHero.ToastNotification;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

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

var app = builder.Build();
...
...
app.Run();

Aqui configuramos o seguinte:

DurationInSeconds – Define em quantos segundos a notificação do sistema será fechada. Isso é aplicado a todas as notificações que você criar neste aplicativo. Você também pode optar por substituir essa configuração, em termos de notificação.

IsDismissable – Adiciona um pequeno botão de fechamento à notificação do sistema, se definido como verdadeiro.

Position – Uma enumeração de onde você deseja que a notificação do sistema apareça;

Se você estiver trabalhando com partial views e/ou JSON Result Views para garantir que suas notificações apareçam mesmo se não houver um recarregamento de página real inclua o código abaixo na classe Program:

app.UseNotyf();

Com isso estamos adicionando um Middleware ao Pipeline que, por sua vez, captura todas as suas notificações geradas por meio de chamadas AJAX. Uma vez que o Middleware busca os dados do XHR, poucas funções JS assumem a partir daí e exibem as mensagens de notificação das configurações pré-definidas.

Usando o recurso

Agora podemos usar o recurso em nosso projeto.

No controlador HomeController vamos injetar no construtor a instância 

public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;
    private readonly INotyfService _notyf;
    public HomeController(ILogger<HomeController> logger, INotyfService notyf)
    {
        _logger = logger;
        _notyf = notyf;
    }
  ...
} 

Agora podemos exibir as notificações usando a instância de INotyfService.

No método Action Index :

public IActionResult Index()
{
        _notyf.Success("Success Notification");
        _notyf.Error("Mensagem de erro");
        _notyf.Warning("Mensagem de Alerta");
        _notyf.Information("Informação - Faça o Backup - fecha em 4 segundos.", 4);

        return View();
 }

As três primeiras notificações vão encerrar em 10 segundos e a notificação de informação fecha em 4 segundos:

Vejamos agora o uso de notificações personalizadas no método Action Privacy :

 public IActionResult Privacy()
 {
        _notyf.Custom("Aviso customizado - fecha em 5 segundos.", 5, "whitesmoke", "fa fa-gear");
        _notyf.Custom("Verifique as configurações do seu Perfil - Encerra em 6 segundos.", 6, "#0c343d", "fa fa-user");

        return View();
  }

Aqui estamos usando notificações customizadas onde podemos usar ícones da fonte FontAwesome bastando informar o nome da classe.

Se você optar por usar sua própria biblioteca de ícones, apenas adicione uma referência da biblioteca ao _Layout.cshtml como faria normalmente, e simplesmente passe o nome da classe para o serviço toast. Você também pode definir a cor de fundo da notificação do sistema. Ele suporta o código hexadecimal e o nome da cor também.

Este projeto é de código fonte aberto que você pode conferir neste link: https://github.com/aspnetcorehero/ToastNotification

Pegue o projeto aqui :   MvcToastNotification.zip (sem as referências) ... 

"Não será assim entre vós; mas todo aquele que quiser entre vós fazer-se grande seja vosso serviçal;
E, qualquer que entre vós quiser ser o primeiro, seja vosso servo;"
Mateus 20:26,27

Referências:

José Carlos Macoratti