How to keep Toast visible when navigating to another page?
Hi,
How to keep Toast notification visible when navigating to another page?
void SomeAction()
{
// DoSomething
SomethingHere();
// Show success toast
this.ToastObj.Show();
// Redirect to parent page
NavigationManager.NavigateTo($"/Parent"); // Issue: Toast notification is lost here. How to keep it visible?
}
- Create folder Components in the root folder
- Add ToastOptions.cs class file and add below codes (If require more SfToast properties, add and configure in ToastComponent)
|
using Syncfusion.Blazor.Notifications;
namespace MyBlazorServerApp.Components
{
public class ToastOptions
{
public string Title { get; set; }
public string CssClass { get; set; }
public string Icon { get; set; }
public string Content { get; set; }
public SfToast ToastObj { get; set; }
}
} |
- Add ToastService.cs class file and add below codes
|
using System;
namespace MyBlazorServerApp.Components
{
public class ToastService
{
public event Action<ToastOptions> ToastInstance;
public void Open(ToastOptions options)
{
// Invoke ToastComponent to update and show the toast with options
this.ToastInstance.Invoke(options);
}
}
} |
- Add ToastComponent.razor file and add below codes
|
@using Syncfusion.Blazor.Notifications;
<SfToast @ref="ToastOptions.ToastObj" ShowProgressBar="true" ShowCloseButton="true"
CssClass="@ToastOptions.CssClass" Icon="@ToastOptions.Icon">
<ToastTemplates>
<Title>
@ToastOptions.Title
</Title>
<Content>
@ToastOptions.Content
</Content>
</ToastTemplates>
</SfToast>
@code {
[Inject]
public ToastService ToastService { get; set; }
// Parameter
private ToastOptions ToastOptions = new ToastOptions();
protected override async Task OnInitializedAsync()
{
// Update the parameter in local variable and render the toast
ToastService.ToastInstance += (ToastOptions options) =>
{
InvokeAsync(async () =>
{
this.ToastOptions.Title = options.Title;
this.ToastOptions.Content = options.Content;
this.ToastOptions.CssClass = options.CssClass;
this.ToastOptions.Icon = options.Icon;
this.StateHasChanged();
await Task.Delay(500);
await this.ToastOptions.ToastObj.ShowAsync();
});
};
}
} |
- Register the ToastService in the Startup.cs file as like below
|
using MyBlazorServerApp.Components;
namespace MyBlazorServerApp
{
public class Program
{
public static async Task Main(string[] args)
{
...
builder.Services.AddScoped<ToastService>();
...
}
}
} |
- Initialize the ToastComponent, end of the App.razor file for update the instance in ToastService
|
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<ToastComponent />
</Found>
</Router> |
- Add below code in Counter.razor file and run the application
|
@page "/counter"
@inject ToastService ToastServices
@code {
protected override async Task OnInitializedAsync()
{
this.ToastServices.Open(new ToastOptions()
{
Title = "Toast title",
Content = "CRUD message",
Icon = "e-success toast-icons",
CssClass = "e-toast-success"
});
}
} |
This works well, thanks! :-)
Hi, I implemented this solution and the toasts display fine, but it doesn't stay when I navigate to another page.
Hi Christian,
You should be able to achieve your requirement using the Timeout property set to 0. In the below sample, we have set the Timeout property to 0 for the SfToast component using service when navigating to the counter page. Please find the below code and sample for your reference.
ToastComponent.razor
|
<SfToast @ref="ToastOptions.ToastObj" Timeout="@ToastOptions.Timeout"> ….. </SfToast>
@code {
protected override async Task OnInitializedAsync() { // Update the parameter in local variable and render the toast ToastService.ToastInstance += (ToastOptions options) => { InvokeAsync(async () => { this.ToastOptions.Timeout = options.Timeout; }); }; } }
|
ToastOptions.cs
|
public class ToastOptions { public int Timeout { get; set; } = 5000; } |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SFTOAS~1-1227502688
Please let us know if you have any queries.
Regards,
Buvana S
I finally got it to work. Your last example helped me understand a few more things on how Toasts works, but my issue was that I was using forceload on my navigate links:
Ex.: navManager.NavigateTo("/page", true);
The last "true part is for a forceload option which forces Blazor to reload the whole page it is navigating to. I removed that part and the Toasts started to stay on screen on the destination page.
Thank you!
Hi Christian,
Thank you for your update. Please let us know if you need any further assistance.
Regards,
Buvana S
