Author : MD TAREQ HASSAN | Updated : 2020/08/28

Blazor Toast Notifications using only C#, HTML and CSS

Using JavaScript Interop

See: Show Bootstrap Toast using IJSRuntime

Showing toast in Blazor WebAssembly

Toast might not show up when using jQuery dcument ready function ($(function() { })), in that case add 0.5 second delay (setTimeout(function() {}, n))

wwwroot/index.html

<!DOCTYPE html>
<html>

<head>
	<!-- ... ... ... --->
</head>

<body>
    
	<!-- ... ... ... --->
	
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha512-kBFfSXuTKZcABVouRYGnUo35KKa1FBrYgwG4PAx7Z2Heroknm0ca2Fm2TosdrrI356EDHMW383S3ISrwKcVPUw==" crossorigin="anonymous"></script>
    <script>

        $(function () {
		
            //console.log("ready!");
            //$('#toast').toast('show');

            setTimeout(
                function () {
                    $('#toast').toast('show');
                }, 500);
        });

    </script>
</body>

</html>