Hi everyone,
I was trying to find a solution for this same issue and came across this forum.
I took a look at the solutions proposed (in special the latest one - Buvana's .Net 6 Toast Service), however I found out a solution which, IMHO, looks simpler (please not I'm rather new at Blazor).
Basically I created a component with a CascadingValue called AppToast:
<CascadingValue Value="this">
@ChildContent
<SfToast @ref="_toast" ShowProgressBar="true" ShowCloseButton="true" Width="350px"
Title="@_title" Content="@_contents" Timeout="@Timeout" CssClass="@_cssClass" Icon="@($"fa {_icon}")">
<ToastPosition X="Center" Y="Top" />
<ToastAnimationSettings>
<ToastShowAnimationSettings Effect="ToastEffect.SlideTopIn"></ToastShowAnimationSettings>
<ToastHideAnimationSettings Effect="ToastEffect.FadeOut"></ToastHideAnimationSettings>
</ToastAnimationSettings>
</SfToast>
</CascadingValue>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; } = default!;
[Parameter]
public int Timeout { get; set; } = 5000;
private SfToast _toast = default!;
private string _title = default!;
private string _contents = default!;
private string _cssClass = default!;
private string _icon = default!;
public async Task ShowSuccessAsync(string message)
{
_title = "Success";
_cssClass = "e-toast-success";
_icon = "fa-circle-check";
await ShowAsync(message);
}
public async Task ShowInfoAsync(string message)
{
...
}
public async Task ShowWarningAsync(string message)
{
...
}
public async Task ShowErrorAsync(string message)
{
...
}
private async Task ShowAsync(string message)
{
_contents = message;
StateHasChanged();
await _toast.ShowAsync();
}
}
Then I just wrapped this component around my MainLayout Component:
<AppToast>
<div class="page">
...
<main class="main-content">
<article class="content px-4">
@Body
</article>
</main>
</div>
</AppToast>
With this setup, in each (Child) component I wish to invoke it, I simply capture the CascadingParameter and invoke the desired method (ShowSuccess, Warning, etc.):
[CascadingParameter]
private AppToast Toast { get; set; } = default!;
...
await Toast.ShowSuccessAsync("The operation succeeded.");
So far, this approach is working well for me.
Best regards,
Marco.
