ASP.NET Core -Toast Notification

A step-by-step guide to installing and configuring the AspNetCoreHero.ToastNotification package in an ASP.NET Core application.

Please donate 👇👇🙂 paypal.com/paypalme/sarrawy?country.x=JO&locale.x=en-us Installation ------------------ Install-Package AspNetCoreHero.ToastNotification Usage - Notyf ------------------------ 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. 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: Success _notifyService.Success("This is a Success Notification"); Error _notifyService.Error("This is an Error Notification"); Warning _notifyService.Warning("This is a Warning Notification"); Information _notifyService.Information("This is an Information Notification"); Set Toast Duration 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); Custom 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! asp.net notification message asp.net notification popup signalr notification asp.net core push notification asp.net mvc push notification asp.net core notification in asp.net mvc asp.net push notification toastr asp.net core toast notification asp.net notification in asp net c# example asp.net mvc signalr notification asp.net core notification system toast notification asp.net