Getting Started with Blazor Toast in Blazor Web App

31 Oct 20258 minutes to read

This section explains how to add the Blazor Toast component to a Blazor Web App using Visual Studio or Visual Studio Code.

Prerequisites

Create a new Blazor Web App in Visual Studio

Create a Blazor Web App using Visual Studio 2022 via Microsoft templates or the Syncfusion® Blazor extension.

Configure the appropriate interactive render mode and interactivity location when creating the Blazor Web App.

Install Syncfusion® Blazor Notifications and Themes NuGet in the App

To add the Blazor Toast component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install Syncfusion.Blazor.Notifications and Syncfusion.Blazor.Themes.

For WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. For Server render mode, install them in the Server project.

Alternatively, execute the following Package Manager commands:

Install-Package Syncfusion.Blazor.Notifications -Version 31.2.2
Install-Package Syncfusion.Blazor.Themes -Version 31.2.2

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the full list of packages and components.

Prerequisites

Create a new Blazor Web App in Visual Studio Code

Create a Blazor Web App using Visual Studio Code via Microsoft templates or the Syncfusion® Blazor extension.

Configure the appropriate interactive render mode and interactivity location when creating the Blazor Web App.

For example, in a Blazor Web App with the Auto interactive render mode, use the following commands:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

For more information on creating a Blazor Web App with various interactive modes and locations, refer to this link.

Install Syncfusion® Blazor Notifications and Themes NuGet in the App

For WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project.

dotnet add package Syncfusion.Blazor.Notifications -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the full list of packages and components.

Register Syncfusion® Blazor Service

Interactive Render Mode Description
WebAssembly or Auto Open ~/_Imports.razor file from the Client project.
Server Open ~/_Imports.razor file located in the Components folder.

Import the Syncfusion.Blazor and Syncfusion.Blazor.Notifications namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Notifications

Register the Syncfusion® Blazor service in the ~/Program.cs file of the Blazor Web App.

If the Interactive Render Mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both Program.cs files (Server and Client).

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

If the Interactive Render Mode is set to Server, the project contains a single ~/Program.cs file. In this case, register the Syncfusion® Blazor service only in that file.

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

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

builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

Add stylesheet and script resources

The theme stylesheet and script are provided via NuGet as Static Web Assets. Include the stylesheet reference in the <head> section and the script reference at the end of the <body> in the ~/Components/App.razor file:

<head>
    <!-- ... -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    <!-- ... -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

See the Blazor Themes topic for additional options to reference themes (Static Web Assets, CDN, and CRG). Also, refer to Adding Script Reference for approaches to add script references in a Blazor application.

Add Syncfusion® Blazor Toast component

Add the Syncfusion® Blazor Toast component to a page in the ~/Pages folder. If the interactivity location is set to Per page/component, define a render mode at the top of the ~/Pages/*.razor component as follows:

Interactivity location RenderMode Code
Per page/component Auto @rendermode InteractiveAuto
  WebAssembly @rendermode InteractiveWebAssembly
  Server @rendermode InteractiveServer
  None —

NOTE

If the Interactivity Location is set to Global and the Render Mode is set to Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default.

Render mode directive:

@* Desired render mode defined here *@
@rendermode InteractiveAuto

Toast component example:

<div class="col-lg-12 control-section toast-default-section">
    <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">
        <ToastPosition X="@ToastPosition"></ToastPosition>
    </SfToast>
    <div class="col-lg-12 col-sm-12 col-md-12 center">
        <div id="toastBtnDefault" style="margin: auto; text-align: center">
            <button class="e-btn" @onclick="@ShowOnClick">Show Toasts</button>
            <button class="e-btn" @onclick="@HideOnClick">Hide All</button>
        </div>
    </div>
</div>

<style>
    #toast_default .e-meeting::before {
        content: "\e705";
        font-size: 17px;
    }

    .bootstrap4 #toast_default .e-meeting::before {
        content: "\e763";
        font-size: 20px;
    }
</style>

@code {
    private SfToast ToastObj;
    private string ToastPosition = "Right";
    private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";

    private async Task ShowOnClick()
    {
        await ToastObj.ShowAsync();
    }

    private async Task HideOnClick()
    {
        await ToastObj.HideAsync("All");
    }
}

Use Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Toast component renders in the default web browser.

Blazor Toast Component

NOTE

View Sample in GitHub.

See Also

NOTE

An interactive Blazor Toast example demonstrates how to render and configure the Toast component.