In this article, we will learn how we can display notifications in blazor. We will use Blazored.Toast package to popup notification.
If you are new to blazor or follow steps to create a blazor app from here. I assume you have already created a blazor server app. Now you need to follow the below steps.
Install Blazored.Toast, to install this you need to execute below command in Package Manager Console or find Blazored.Toast in Nuget-Solution.
Install-Package Blazored.Toast
you also can install Blazored.Toast using Dotnet CLI
dotnet add package Blazored.Toast
Once you have installed Blazored.Toast package, you need to do the following steps to use Toast notification.
Register its service in Startup class. Which is available in your blazor server application.
To Register service, you need to include the following namespace.
using Blazored.Toast;
Next, register the service in the ConfigureServices() method of Startup class.
services.AddBlazoredToast();
Import following lines inside _Imports.razor file. This will allow us to use Blazored.Toast in each component without importing directive for each component.
@using Blazored.Toast @using Blazored.Toast.Services
Add the following CSS links inside _Host.cshtml file.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="_content/Blazored.Toast/blazored-toast.css" rel="stylesheet" />
paste the following content where you want to use Toast notification, I’ll use an Index.razor component.
@page "/" @inject IToastService toastService <button class="btn btn-info" @>In MainLayout.razor file, put below tag at end of the file.
<BlazoredToasts />Or if you wanna customize you can use the below code and replace it with the above tag.
<BlazoredToasts Position="ToastPosition.TopRight" Timeout="10" SuccessClass="success-toast-override" SuccessIconClass="fa fa-check" ErrorIconClass="fa fa-times" InfoIconClass="fa fa-info" WarningIconClass="fa fa-warning"/>And That’s it, now you can use Toast notification. when you run the application and following output will display in a browser.
Recommend articles which you should read once.
- CRUD Using Blazor, Entity Framework Core And Dapper
- Sorting Table In Blazor
- Pagination In Blazor
- Searching Feature In Blazor
- Validation In Blazor Application
- Deploy A Blazor Application On IIS
- Use LocalStorage In Blazor
- Modal Popup In Blazor
hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
View Comments
Hi,
I have implemented the same, but my toast messages disappears immediately.
What could be the reason
try to increase timeout
Thanks for ur quick reply Faisal,
I did that, but still not working... It seems the complete page is getting refreshed... I don't know why.
As I am new to Blazor, so not able to find out the issue. I would be thankful if u help me out.
Note I had an issue with this working , but needed IconType="IconType.FontAwesome" in the MainLayout.razor such as:
Best reply I can give now is, review each step again. I'm quite sure you missed minor thing.
Hi,
Very nice idea. I am new to Blazor and come from the WPF world. I have setup my page/component similar to a WPF code behind, where all my c# is in one file:
public class ListsPageBase : ComponentBase
{
public ToastService toastService { get; set; } = new ToastService();
public void OnSaveRecordClick(MouseEventArgs ars)
{
try
{
api.ListTypeWrite(Guid.Parse(projectIdParameter), projectsListTypeList);
toastService.ShowSuccess("You are sign up successfully!");
}
catch (Exception ex)
{
ErrorDialogText = ex.Message;
IsErrorDialogVisible = true;
}
}
}
I have a button on a Toolbar and when the user clicks this button I want your Toast notification to display. I followed your instructions as above but cannot get it to post.
In my .razor file at the bottom I did put as you stated.
I'm not sure what I do wrong.
Could you please show me?
Thank you kindly.