How to show or hide any page using Blazor Toast?

This guide demonstrates how to show or hide the page using toast service in Blazor Toast component.

Prerequisites:

Ensure the development environment meets the following requirements.

.NET Framework: .NET 8 or .NET 9 or .NET 10
Browser Compatibility: https://blazor.syncfusion.com/documentation/browser-support
Development Environment: Visual Studio 2022 or Visual Studio Code

You can initialize single Blazor Toast instance and use it all over application by creating service. Refer the following steps to create a service to show toast from any page.

Step 1: Create a toast service (ToastService.cs) to inject in pages to show toast messages from anywhere. Here, title and content can be passed to show the toast message.

public class ToastOption
{
    public string Title { get; set; }
    public string Content { get; set; }
}
 
public class ToastService
{
    public event Action<ToastOption> ShowToastTrigger;
    public void ShowToast(ToastOption options)
    {
        //Invoke ToastComponent to update and show the toast with messages  
        this.ShowToastTrigger.Invoke(options);
    }
}

Step 2: Add the ToastService to services collection in Program.cs file.

using ShowOrHideToast.Components;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddSingleton<ToastService>();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();


app.UseAntiforgery();

app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

Step 3: Create a ToastComponent (ToastComponent.razor) which shows SfToast based on ToastService notification.

@using Syncfusion.Blazor.Notifications;  
@inject ToastService ToastService
 
<SfToast @ref="Toast" Timeout=2000>  
    <ToastTemplates>  
        <Title>  
            @Options.Title  
        </Title>  
        <Content>  
            @Options.Content  
        </Content>  
    </ToastTemplates>  
    <ToastPosition X="Right"></ToastPosition>  
</SfToast>  
  
@code{
 
    SfToast Toast;  
 
    private bool IsToastVisible { get; set; } = false;  
 
    private ToastOption Options = new ToastOption();
 
    protected override void OnInitialized()
    {
        ToastService.ShowToastTrigger += (ToastOption options) =>
        {
            InvokeAsync(() =>
            {
                this.Options.Title = options.Title;
                this.Options.Content = options.Content;
                this.IsToastVisible = true;
                this.StateHasChanged();
                this.Toast.ShowAsync();
            });
        };
        base.OnInitialized();
    }
}

Step 4: Add the ToastComponent created in above step in MainLayout.razor file.

@inherits LayoutComponentBase
@using BlazorApp.Components;
 
<PageTitle>BlazorApp</PageTitle>
 
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
 
    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
 
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>
<ToastComponent />

Step 5: Now, you can inject ToastService in any razor page (For example, Home.razor) and call ToastService.ShowToast() method to show the toast notifications.

@page "/"
@using BlazorApp.Components  
@inject ToastService ToastService 
 
<button class="e-btn" @onclick="@ShowToast"> Show Toast</button>  
  
@code {  
    private void ShowToast()  
    {  
        this.ToastService.ShowToast(new ToastOption()  
        {  
            Title = "Toast Title",  
            Content = "Toast content"
        });  
    }  
}

View Sample in GitHub

See Also:

Getting Started with Blazor Toast Component

Did you find this information helpful?

Yes

Comments (0)

How to show or hide any page using Blazor Toast?

Access denied