ASP.NET Core: Toast Notifications in ASP.NET Core

When you build web apps, you need to inform your users of the messages you can use the Toast Notifications.

First off, you should install the AspNetCoreHero.ToastNotification from nuget packages.

The Toast Notifications is a free library for ASP.NET Core Applications. It is elegant and compatible with ASP.NET Core 3.1 and .NET 5.

You can also download it directly from https://www.nuget.org/packages/AspNetCoreHero.ToastNotification

After installing the library, you need to open the _Layout file, then modify your code as shown below.

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await Component.InvokeAsync("Notyf")
@await RenderSectionAsync("Scripts", required: false)

Next, You need to register the package into your Startup class

public void ConfigureServices(IServiceCollection services)
{
    //...

    services.AddNotyf(config => { config.DurationInSeconds = 10; config.IsDismissable = true; config.Position = NotyfPosition.BottomRight; });
}

DurationInSeconds allows you to configure the toaster close time

IsDismissable allows you to add a small close button

Position allows you to set the toast notification to appear

So you have installed ToastNotification. Next, You can open your HomeController, then modify your code as shown below.

public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;
    private readonly INotyfService _notyfService;

    public HomeController(INotyfService notyfService, ILogger<HomeController> logger)
    {
        _logger = logger;
        _notyfService = notyfService;
    }    
}

Next, Open the Startup class, then modify your Configure method to enable toast notification while working with AJAX Requests, you will have to add the middleware into the Service Container

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    //..
    app.UseNotyf();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        endpoints.MapRazorPages();
    });
}

If you are working with Partial Views or JSON, you need to make sure that your notifications pop up even if you don't reload the page. 

To show notifications pop up you can use Success, Error, Warning, Information methods.

public IActionResult Index()
{
    _notyfService.Success("You have successfully saved the data.");
    _notyfService.Error("Exception...");
    _notyfService.Warning("Warning...");
    _notyfService.Information("Welcome to FoxLearn.", 5);
    return View();
}

If desired, you can also customize the toast notification.

_notyfService.Custom("Custom Notification...", 10, "#B500FF", "fa fa-home");

If you use icon, you need to declare FontAwesome library. Font Awesome icons are supported by default. The color of the text and icons is set automatically based on the color of the notification.