11/09/2020 Blazor - Toast Notifications (sem usar javascript)
Blazor - Toast Notifications (sem usar javascript)
Hoje veremos como exibir notificações toast no Blazor sem usar JavaScript. Vamos usar somente
código C#, HTML e CSS.
Este artigo foi totalmente baseado no original de Chris Sainty com pequenas alterações e ajustes.
Uma notificação toast fornece um feedback simples sobre uma operação em uma pequena janela pop-up, e, ocupa a
quantidade de espaço necessária para a mensagem; a atividade atual continua visível e interativa desaparecendo
automaticamente após um tempo limite. É um recurso muito usando em aplicações Androids.
Atualmente existem diversas bibliotecas que usam JavaScript para emitir toast notifications que podemos usar com o
Blazor.( veja aqui e aqui )
Hoje veremos como implementar este recurso em um projeto Blazor Server sem usar JavaScript mas apenas código
C#, e umas pitadas de CSS e HTML.
O objetivo do projeto é dar uma idéia de como implementar este recurso sem usar JavaScript.
Recursos usados:
Visual Studio 2019 Community (16.4.x)
.NET Core 3.1 SDK
Blazor
Criando o projeto Blazor Server no VS Community 2019
Abra o VS 2019 Community (versão mínima 16.4) e selecione a opção Create a New Project;
A seguir selecione a opção Blazor app e clique em next;
Informe o nome do projeto : Blazor_ToastNotification1, a localização e clique em Create;
A seguir teremos uma janela com duas opções :
1. Blazor Server App
2. Blazor WebAssembly App
Selecione a primeira opção - Blazor Server App. Não vamos usar autenticação e vamos habilitar o https.
www.macoratti.net/20/04/blz_toastsjs1.htm 1/6
11/09/2020 Blazor - Toast Notifications (sem usar javascript)
Clique no botão Create para criar o projeto.
Antes de prosseguir vamos limpar o projeto excluindo os arquivos abaixo e suas referências:
Counter.razor
WeatherForecast.razor
WeatherForecast.cs
WeatherForecastService.cs
Vamos também ajustar o arquivo NavMenu.razor deixando apenas a opção Toast Notifications e a opção Demo Toast
conforme o código a seguir:
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Toast Notifications
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="demo">
<span class="oi oi-plus" aria-hidden="true"></span> Demo Toast
</NavLink>
</li>
</ul>
</div>
Agora com o projeto criado e os ajustes feitos vamos criar o serviço de notificação Toast.
Criando o serviço de Notificação toast
Crie uma pasta Services na raiz do projeto (Project->New Folder) e nesta pasta crie o arquivo ToastLevel onde vamos
definir uma enumeração com os tipos de mensagens toast a serem exibidas.
public enum ToastLevel
{
Info,
Success,
Warning,
Error
}
Crie também o arquivo ToastService onde vamos definir o serviço para emitir notificações:
using System;
using System.Timers;
namespace Blazor_ToastNotification1.Services
{
public class ToastService : IDisposable
www.macoratti.net/20/04/blz_toastsjs1.htm 2/6
11/09/2020 Blazor - Toast Notifications (sem usar javascript)
{
public event Action<string, ToastLevel> OnShow;
public event Action OnHide;
private Timer Countdown;
public void ShowToast(string message, ToastLevel level)
{
OnShow?.Invoke(message, level);
StartCountdown();
}
private void StartCountdown()
{
SetCountdown();
if (Countdown.Enabled)
{
Countdown.Stop();
Countdown.Start();
}
else
{
Countdown.Start();
}
}
private void SetCountdown()
{
if (Countdown == null)
{
Countdown = new Timer(5000);
Countdown.Elapsed += HideToast;
Countdown.AutoReset = false;
}
}
private void HideToast(object source, ElapsedEventArgs args)
{
OnHide?.Invoke();
}
public void Dispose()
{
Countdown?.Dispose();
}
}
}
A classe ToastService vai permitir emitir as notificações toast e possui um único método público, ShowToast() que recebe
a mensagem a ser exibida o e nível da mensagem toast.
O serviço também possui dois eventos, OnShow e OnHide, e um temporizador, Countdown. Nosso componente toast se
inscreverá nos eventos e os usará para exibir e ocultar as notificações.
O timer é usado internamente pelo serviço e esta definido inicialmente com um delay de 5 segundos, após esse período
o evento OnHide será invocado.
Criando o componente Toast.razor e o code-behind ToastBase.cs
Agora vamos criar o componente Toast e aqui vamos separar a lógica do componente do código de marcação usando a
experiência code-behind.
Para isso vamos criar um componente Toast.razor na pasta Shared com o código abaixo:
@inherits ToastBase
<div class="toast @(IsVisible ? "toast-visible" : null) @BackgroundCssClass">
<div class="toast-icon">
<i class="fa fa-@IconCssClass" aria-hidden="true"></i>
</div>
<div class="toast-body">
<h5>@Heading</h5>
<p>@Message</p>
</div>
</div>
Note que usamos a declaração @inherits ToastBase no início do arquivo para indicar que ele herda da classe ToastBase
que iremos criar a seguir.
www.macoratti.net/20/04/blz_toastsjs1.htm 3/6
11/09/2020 Blazor - Toast Notifications (sem usar javascript)
Por definição o arquivo code-behind tem que ter nome do componente Toast seguido do prefixo Base e tem que herdar
de ComponentBase.
O código da classe ToastBase é dado abaixo:
using Blazor_ToastNotification1.Services;
using Microsoft.AspNetCore.Components;
using System;
namespace Blazor_ToastNotification1.Shared
{
public class ToastBase : ComponentBase, IDisposable
{
[Inject] ToastService ToastService { get; set; }
protected string Heading { get; set; }
protected string Message { get; set; }
protected bool IsVisible { get; set; }
protected string BackgroundCssClass { get; set; }
protected string IconCssClass { get; set; }
protected override void OnInitialized()
{
ToastService.OnShow += ShowToast;
ToastService.OnHide += HideToast;
}
private void ShowToast(string message, ToastLevel level)
{
BuildToastSettings(level, message);
IsVisible = true;
InvokeAsync(StateHasChanged);
}
private void HideToast()
{
IsVisible = false;
InvokeAsync(StateHasChanged);
}
private void BuildToastSettings(ToastLevel level, string message)
{
switch (level)
{
case ToastLevel.Info:
BackgroundCssClass = "bg-info";
IconCssClass = "info";
Heading = "Info";
break;
case ToastLevel.Success:
BackgroundCssClass = "bg-success";
IconCssClass = "check";
Heading = "Success";
break;
case ToastLevel.Warning:
BackgroundCssClass = "bg-warning";
IconCssClass = "exclamation";
Heading = "Warning";
break;
case ToastLevel.Error:
BackgroundCssClass = "bg-danger";
IconCssClass = "times";
Heading = "Error";
break;
}
Message = message;
}
public void Dispose()
{
ToastService.OnShow -= ShowToast;
}
}
}
Vamos entender o código:
Estamos injetando o serviço ToastService no componente e definindo algumas propriedades que serão usadas na parte
de marcação do componente.
A seguir, estamos substituindo um dos eventos do ciclo de vida do componente Blazor, OnInitialized onde estamos
www.macoratti.net/20/04/blz_toastsjs1.htm 4/6
11/09/2020 Blazor - Toast Notifications (sem usar javascript)
conectando os eventos que definimos no ToastService aos manipuladores no componente.
Depois, temos os manipuladores de eventos ShowToast e HideToast. ShowToast pega a mensagem e o nível de toast e
os passa para o método BuildToastSettings onde definmos vários nomes de classes CSS, o cabeçalho e a mensagem.
A propriedade IsVisible é definida no componente e StateHasChanged é chamado usando o InvokeAsync. O método
HideToast apenas define IsVisible como false e chama StateHasChanged.
Precisamos chamar StateHasChanged pois o componente precisa renderizar novamente quando seu estado for alterado.
Quando essa atualização vem do próprio componente ou via um valor passado para o componente usando a diretiva
[Parameter], ou seja, algo que o componente conhece e pode monitorar , então uma nova renderização é acionada
automaticamente.
No entanto, se ocorrer uma atualização no estado dos componentes de uma fonte externa, por exemplo, um evento,
esse processo automático é ignorado e uma chamada manual deve ser feita para que o componente saiba que algo
mudou. É aqui que entra o StateHasChanged.
www.macoratti.net/20/04/blz_toastsjs1.htm 5/6
11/09/2020 Blazor - Toast Notifications (sem usar javascript)
www.macoratti.net/20/04/blz_toastsjs1.htm 6/6
