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