ToastNotification is a Minimal & Elegant Toast Notification Package for ASP.NET Core Web Applications that can be invoked via C#. Compatilble with ASP.NET Core 3.1 and .NET 5.
- 📱 Elegant & Responsive
- 🐣 Global Configuration to Set the Toast Position, Duration.
- 🎸 Easily integration with ASP.NET Core 3.1 and .NET 5 Applications.
- 🎃 Support to render custom HTML content within the toasts
- 🐣 Simple and Customizable. Create your own custom toast with your favorite color and icons with ease!
- 👴🏽 Works with TempData internally.
- 📱 Currently Supports 2 Popuplar JS Library.
- 📱 Supports AJAX / XHR out of the box.
More Features Coming Soon.
Not Compatible with Blazor SDK. Intended only for ASP.NET Core Web Applications.
Install-Package AspNetCoreHero.ToastNotification
Or
dotnet add package AspNetCoreHero.ToastNotification
Or
Get it directly from NuGet - https://www.nuget.org/packages/AspNetCoreHero.ToastNotification/
As mentioned earlier, this project / package is an ASP.NET Core Abstraction of popular Javascript libraries that are responsible for toast notifications. Currently, 2 popuplar libraries are abstracted , Notyf and ToastifyJs. You can choose to use either of them based on their look and feel. Follow the guide below for each of the toast notification library. Cheers!
Once the package is installed, open your Startup.cs and add in the following to the ConfigureServices method.
services.AddNotyf(config=> { config.DurationInSeconds = 10;config.IsDismissable = true;config.Position = NotyfPosition.BottomRight; });Available Positions are TopRight,BottomRight,BottomLeft,TopLeft,TopCenter,BottomCenter. Set the isDismissible bool to false, to remove the close icon from your toasts! Pretty handy.
To enable toast notification while working with AJAX Requests, you will have to add the middleware into the Service Container. Open up Startup.cs and add the following line of code under the Configure method.
app.UseNotyf();More settings will be added in the upcoming releases
Next, open up your _Layout.cshml file and add in the following
@await Component.InvokeAsync("Notyf")
Make sure that you add this line after loading jquery. It is usually ideal to place this code below the essential scripts and above the @await RenderSectionAsync("Scripts", required: false) line.
Let's add the Constructor Injection. Add the following in your controllers / razor classes to invoke the toast notifications as required.
public INotyfService _notifyService { get; }
public HomeController( INotyfService notifyService)
{
_notifyService = notifyService;
}
Once the Injection is done, you can call the toast notification as you need. Currently 5 Types are supported.
_notifyService.Success("This is a Success Notification");_notifyService.Error("This is an Error Notification");_notifyService.Warning("This is a Warning Notification");_notifyService.Information("This is an Information Notification");By default, the toast gets dismissed in 5 seconds. You can set the duration(in seconds) after which the toast will be dismissed.
_notifyService.Success("This toast will be dismissed in 10 seconds.",10);As the previous 4 Modes are very static in terms of color and icon, I have added a 5th type that let's you customize everything.
_notifyService.Custom("Custom Notification - closes in 5 seconds.", 5, "whitesmoke", "fa fa-gear");
_notifyService.Custom("Custom Notification - closes in 5 seconds.", 10, "#135224", "fa fa-gear");
Here, you add the class of the icon as required. Font Awesome icons are supported by default. You would just have to pass the icon class name. The color of the text and icon is automatically set based on the color of the notification. Supports HEXR Color Codes too!
A Demo Implementation using ASP.NET Core MVC can be found here - https://github.com/aspnetcorehero/ToastNotification/tree/master/ToastNotification.Notyf
Once the package is installed, open your Startup.cs and add in the following to the ConfigureServices method.
services.AddToastify(config=> { config.DurationInSeconds = 1000; config.Position = Position.Right; config.Gravity = Gravity.Bottom; });Available Positions are Right and Left. Available Gravity is Top and Bottom
More settings will be added in the upcoming releases
Next, open up your _Layout.cshml file and add in the following
@await Component.InvokeAsync("Toastify")
Make sure that you add this line after loading jquery. It is usually ideal to place this code below the essential scripts and above the @await RenderSectionAsync("Scripts", required: false) line.
Let's add the Constructor Injection. Add the following in your controllers / razor classes to invoke the toast notifications as required.
public IToastifyService _notifyService { get; }
public HomeController( IToastifyService notifyService)
{
_notifyService = notifyService;
}
Once the Injection is done, you can call the toast notification as you need. Currently 5 Types are supported.
_notifyService.Success("This is a Success Notification");_notifyService.Error("This is an Error Notification");_notifyService.Warning("This is a Warning Notification");_notifyService.Information("This is an Information Notification");By default, the toast gets dismissed in 5 seconds. You can set the duration(in seconds) after which the toast will be dismissed.
_notifyService.Success("This toast will be dismissed in 10 seconds.",10);As the previous 4 Modes are very static in terms of color and icon, I have added a 5th type that let's you customize everything.
_notifyService.Custom("Custom Notification - closes in 5 seconds.", 5, "whitesmoke");
_notifyService.Custom("Custom Notification - closes in 5 seconds.", 10, "#135224");
A Demo Implementation using ASP.NET Core MVC can be found here - https://github.com/aspnetcorehero/ToastNotification/tree/master/ToastNotification.Toastify
The Javascript libraries used in this project are https://github.com/caroso1222/notyf and https://apvarun.github.io/toastify-js/.
Has this Project helped you learn something New? or Helped you at work? Do Consider Supporting.
- Blogs at codewithmukesh.com
- Facebook - codewithmukesh
- Twitter - Mukesh Murugan
- Twitter - codewithmukesh
- Linkedin - Mukesh Murugan