Bootstrap Toast in .Net Core Web App

Preliminary knowledge for this short tutorial:

• basic html/css
• some basic jquery/bootstrap
• beginner .net core Razor Pages with C#
• see my previous post on Razor Pages https://dev.to/zoltanhalasz/filter-a-list-in-razor-pages-net-core-2-2-39bp
• suggested study for Razor pages, I strongly recommend doing the Microsoft Tutorial from the linked tutorial list: https://dev.to/zoltanhalasz/razor-pages-not-for-shaving-52eh

Among my achievements in this transition year was to learn some CSS. This is how I stumbled upon Bootstrap (https://getbootstrap.com/), and later, during my studies of Javascript, I met some JQuery.

One of the nice things in Bootstrap is that it offers some out-of the box elements designed in a simple tasteful way. And, Bootstrap is the default CSS system for .net core (2.2) web applications.

When working on my .net core project, I wanted somehow to send feedback to the user when an action couldn't be accomplished, or there was an error.

This is how I met Toast, which is a nice Html element showing a message in the Browser. You can see examples here: https://www.w3schools.com/bootstrap4/bootstrap_toast.asp

But how can I implement this in my .net core web app?

Here's how I proceeded.

Created a class to contain the basic properties of a Toast

  public class Toaster
    {       
        public string Message { get; set; }
        public string CssClass { get; set; }        
    }

then, within the PageModel class of my page (where I want to show the messages), I declared a binding property, that will contain my message and CssClass (an instance of the above class Toaster)

        [BindProperty]
        public Toaster myToaster { get; set; }

I will use this myToaster property to show an error message, when my main list that I want to display in the page, will be empty (no rows are in the list). The below snippet is at the end of the Page OnGet method, and GeneratedDetail is my list that is populated after filtering (see my previous small tutorial https://dev.to/zoltanhalasz/filter-a-list-in-razor-pages-net-core-2-2-39bp)

            if (GeneratedDetail == null || GeneratedDetail.Count==0) myToaster = new Toaster() { CssClass = "alert-danger", Message = "The list was empty. Try to filter with other values." };            
            else myToaster = new Toaster() { CssClass = "alert-danger", Message = "" };

            return Page();

But, how will then the message arrive in the html of the page? Open the .cshtml file belonging to the pagemodel above, and copy the below snippet, just after the tag, which shows the end of displayed list. This will be a Razor Syntax code with the bootstrap toast and some jquery in the script part below, that will allow the Toast to be shown for 2 seconds.

  @if ((Model.myToaster.Message != "") && (Model.myToaster != null))
        {
            <div class="toast mt-3" id="mytoastr">
                <div class="toast-body @Model.myToaster.CssClass">
                    @Model.myToaster.Message
                </div>
            </div>
            <script>
                $(document).ready(function () {
                    $('#mytoastr').toast({ delay: 2000 });
                    $('#mytoastr').toast('show');
                });
            </script>
        }

It is important to have the jquery and bootstrap files in the wwwroot folder! And the project should reference them, so the loaded page should have access to the source of bootstrap.css and jquery.js files.

After running the page, and filtering my data to obtain an empty list, the result will be a small message with red background - "alert-danger" class from Bootstrap, showing "The list was empty. Try to filter with other values."

I hope this was useful for the reader. Let me know if you would do something differently!