AspNetCoreHero.ToastNotification 1.0.0

Elegant Toast Notifications for ASP.NET Core Applications. Compatilble with ASP.NET Core 3.1 and .NET 5.

There is a newer version of this package available.
See the version list below for details.
Install-Package AspNetCoreHero.ToastNotification -Version 1.0.0
dotnet add package AspNetCoreHero.ToastNotification --version 1.0.0
<PackageReference Include="AspNetCoreHero.ToastNotification" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add AspNetCoreHero.ToastNotification --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: AspNetCoreHero.ToastNotification, 1.0.0"
For F# scripts that support #r syntax, copy this into the source code to reference the package.

ToastNotification - Elegant Notifications For ASP.NET Core Applications

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.

Features

  • 📱 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.

More Features Coming Soon.

Not Compatible with Blazor SDK. Intended only for ASP.NET Core Web Applications.

Installation

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!

Notyf

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.

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.

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!

Demo - Notyf

A Demo Implementation using ASP.NET Core MVC can be found here - https://github.com/aspnetcorehero/ToastNotification/tree/master/ToastNotification.Notyf

Toastify-Js

Usage

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.

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");
_notifyService.Custom("Custom Notification - closes in 5 seconds.", 10, "#135224");
            

Demo - Toastify

A Demo Implementation using ASP.NET Core MVC can be found here - https://github.com/aspnetcorehero/ToastNotification/tree/master/ToastNotification.Toastify

Mentions

The Javascript libraries used in this project are https://github.com/caroso1222/notyf and https://apvarun.github.io/toastify-js/.

Support

Has this Project helped you learn something New? or Helped you at work? Do Consider Supporting.
Buy Me A Coffee

About the Author

Mukesh Murugan

ToastNotification - Elegant Notifications For ASP.NET Core Applications

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.

Features

  • 📱 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.

More Features Coming Soon.

Not Compatible with Blazor SDK. Intended only for ASP.NET Core Web Applications.

Installation

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!

Notyf

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.

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.

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!

Demo - Notyf

A Demo Implementation using ASP.NET Core MVC can be found here - https://github.com/aspnetcorehero/ToastNotification/tree/master/ToastNotification.Notyf

Toastify-Js

Usage

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.

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");
_notifyService.Custom("Custom Notification - closes in 5 seconds.", 10, "#135224");
            

Demo - Toastify

A Demo Implementation using ASP.NET Core MVC can be found here - https://github.com/aspnetcorehero/ToastNotification/tree/master/ToastNotification.Toastify

Mentions

The Javascript libraries used in this project are https://github.com/caroso1222/notyf and https://apvarun.github.io/toastify-js/.

Support

Has this Project helped you learn something New? or Helped you at work? Do Consider Supporting.
Buy Me A Coffee

About the Author

Mukesh Murugan

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.1.0 2,011 12/11/2020
1.0.0 191 11/29/2020