ASP .NET Core Bootstrap Toast

Introduction

Bootstrap 5.3.3 provides excellent documentation for creating toast notifications, but when a developer follows the documentation instructions, they include the toast directly in a page. This means that if more than one page in a project requires the same toast, any changes to the toast must be made to each instance of it. Learn how to create a single toast that can be used more here.

ASP.NET Core source code

Step 1

Create the following file, toast-click.js under www\js for handling the JavaScript click events for the toast.

(function () {
    function ready(fn) {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', fn);
        } else { fn(); }
    }

    ready(function () {
        var btn = document.getElementById('showToastBtn');
        var el = document.getElementById('appToast');
        if (!btn || !el || typeof bootstrap === 'undefined' || !bootstrap.Toast) return;

        btn.addEventListener('click', function () {
            var t = bootstrap.Toast.getOrCreateInstance(el);
            t.show();
        });
    });
})();

In _Layout.cshtml reference toast-click.js

    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/js/toast-click.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Step 2

Create a C# model to pass details to the toast.

public class ToastViewModel
{
    public string Title { get; set; } = "Notice";
    public string Message { get; set; } = "Button clicked.";
    public bool AutoHide { get; set; } = true;
    public int DelayMs { get; set; } = 5000; // optional, if you use it
}

Step 3

Design the toast using the modal above. Take the time to consider the design, including colors and positioning.

Below is the toast model, along with an accompanying image for a standard toast.

💡 Consider position in regards to importance of the meaning of the toast. For instance a error might be placed center of the page.

Step 4

Invoke a toast.

Front-end code

In the image below 1️⃣ is used in toast-click.js.

2️⃣ points to the toast.

Back-end code

public class PrivacyModel : PageModel
{
    public ToastViewModel Toast { get; private set; } = new();

    public void OnGet()
    {
        Toast.Title = "Alert";
        Toast.Message = "Your privacy is important to us.";
        Toast.AutoHide = true;
        Toast.DelayMs = 2000;
    }
}

The code below shows creating the model and setting projects. In a real project, the toast setup will be dependent on the need of the toast, which can range from a return value from a method, for example.

In the source code, see MorePage.cshtml, which shows changing toast details.

public class MorePageModel : PageModel
{
    public ToastViewModel Toast { get; private set; } = new();

    public void OnGet()
    {
        Toast.Title = "Alert";
        Toast.Message = "From get";
        Toast.AutoHide = true;
        Toast.DelayMs = 2000;
    }

    public PageResult OnPostSubmit()
    {

        Toast.Title = "Hey";
        Toast.Message = "Message has changed";
        Toast.AutoHide = true;
        Toast.DelayMs = 2000;
        return Page();
    }
}

Summary