Is there a SfToast Provider and SfToastService ?

[Sandro Rizzetto]

I wonder if it is possible to manage the SfToast without to put the control on the page but like with SfDialog have a Provider and a service to call via code.

Thanks

[Kokila Poovendran]

Hi Sandro Rizzetto,

We have carefully reviewed your query and prepared a sample solution that aligns with your requirements. Please find the attached sample. In this example, we utilized the Toast service to manage the Toast component without placing it directly on the page. Kindly take a moment to review the sample and confirm whether it meets your expectations. Your understanding is greatly appreciated.



Regards,
Kokila Poovendran.

Attachment: BlazorServerProject_a6e8ceda.zip

[Sandro Rizzetto]

Thanks for the example. Is it working also with a net8 WebApp ?? because I have several problems with SfDialogService with this mode (even if the page has RenderMode InteractiveServer)

See my ticket  #548045. 

[Kokila Poovendran]

Hi Sandro Rizzetto,

Thank you for your follow-up question.

Yes, the example provided should also work with a .NET 8 WebApp application. To further assist you, we have prepared a sample below for your reference. Kindly review the sample, and if you have any additional concerns or encounter further issues, please don't hesitate to reach out to us for further assistance.

Regards,
Kokila Poovendran.

Attachment: BlazorApp1_(2)_af91b697.zip

[Joe Sperlak]

I have implemented the Toast service example provided here as well as in the documentation. My question is, is there a way to add other options like CssClass to the ToastOptions class? I created an enum that gets added to that class and in the component in the OnInitialized method, I am using a switch statement to set the css class of a private variable in the ToastComponent. The problem is, the first time the toast appears, it doesn't have a css class applied to it. But if I click that button again to show the toast it has the styling. Is there an easy way to fix this or should the ToastService have multiple

[UdhayaKumar Duraisamy]

Yes, it is possible to set the CssClass property according to the given Enum value. For reference, kindly refer to the shared code sample below.

[Index.razor]

@page "/"

@using ShowOrHideToast.Components

@inject ToastService ToastService

 

<button class="e-btn" @onclick="() => ShowToast(ToastStyle.Success)"> Show Success Toast</button>

 

<button class="e-btn" @onclick="() => ShowToast(ToastStyle.Error)"> Show Error Toast</button>

 

@code {

    private void ShowToast(ToastStyle style)

    {

        this.ToastService.ShowToast(new ToastOption()

            {

                Title = "Toast Title",

                Content = "Toast content",

                CssStyle = style

            });

    }

}

[ToastService.cs]

    public enum ToastStyle

    {

        Success,

        Info,

        Warning,

        Error

    }

    public class ToastOption

    {

        public string Title { get; set; }

        public string Content { get; set; }

        public ToastStyle CssStyle { 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);

        }

    }

[ToastComponent.razor]

@using Syncfusion.Blazor.Notifications;

@inject ToastService ToastService

 

<SfToast @ref="Toast" CssClass="@CssType" Timeout=500>

    <ToastTemplates>

        <Title>

            @Options.Title

        </Title>

        <Content>

            @Options.Content

        </Content>

    </ToastTemplates>

    <ToastPosition X="Right"></ToastPosition>

</SfToast>

 

@code {

 

    SfToast Toast;

 

    private string CssType { get; set; }

    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.CssType = GetCssClass(options.CssStyle);

                this.IsToastVisible = true;

                this.StateHasChanged();

                this.Toast.ShowAsync();

            });

        };

        base.OnInitialized();

    }

    private string GetCssClass(ToastStyle style)

    {

        switch (style)

        {

            case ToastStyle.Success:

                return "e-toast-success";

            case ToastStyle.Info:

                return "e-toast-info";

            case ToastStyle.Warning:

                return "e-toast-warning";

            case ToastStyle.Error:

                return "e-toast-danger";

            default:

                return string.Empty;

        }

    }

}