Search results

Getting Started

This section briefly explains how to include a Toast component in your Blazor client-side application. You can refer to the Getting Started with Syncfusion Blazor for Client-Side in Visual Studio 2019 Preview page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  • Install Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Please ensure to check the Include prerelease option.
  • You can add the client-side resources through CDN or local npm package to the <head> element of the ~/wwwroot/index.html page.
<head>
    <environment include="Development">
        <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
     </environment>
</head>

Initialize the ASP.NET Core Blazor Toast component

Initialize the Essential JS 2 Toast component in any web page (razor) in the Pages folder. For example, the Toast component is added in the ~/Pages/Index.razor page.

The following code explains how to initialize a simple Toast in ASP.NET Razor page.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Notifications
@using Syncfusion.EJ2.Blazor.Buttons

<EjsToast @ref="ToastObj" Title="Adaptive Tiles Meeting" TimeOut=5000 Icon="e-meeting" Content="@ToastContent">
    <ToastPosition X="Right"></ToastPosition>
</EjsToast>
<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div id="toastBtnDefault" style="margin: auto;text-align: center">
        <EjsButton Content="Show Toasts" @onclick="@ShowOnClick"></EjsButton>
        <EjsButton Content="Hide All" @onclick="@HideOnClick"></EjsButton>
    </div>
</div>

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

@code {
    EjsToast ToastObj;

    public string ToastContent { get; set;} = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";
    private void ShowOnClick()
    {
        this.ToastObj.Show();
    }
    private void HideOnClick()
    {
        this.ToastObj.Hide("All");
    }

}

Run the application

After successful compilation of your application, run the application.

The output will be as follows.

Toast Sample

See Also