find and solve || findandsolve.com
Please wait.....

ASP.NET Core Toast Notification Example

x ASP.NET Core Toast Notification Example

In this source code project, we will provide a combination of CSS and Javascript that can improve the user experience by adding Toast Notifications in ASP.NET Core MVC / Razor.


There are different types of Toast Notifications from the different libraries in ASP.NET Core Applications. It is elegant and compatible with ASP.NET Core 3.0 and .NET 5 but I will try to make a simple Toast Alert for users.


 CSS


         #toast {
            display: none;
            border-radius: 62px;
            display: none;
            pointer-events: auto;
            min-width: 300px;
            font-weight: 600;
            background-color: #0c0c0c8a;
            padding: 12px 25px;
            font-size: 16px;
            -webkit-box-shaadow: 0 1px 1px rgba(0,0,0,.25), 0 0 1px rgba(0,0,0,.35);
            box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 0 1px rgba(0,0,0,.35);
            -webkit-border-radius: 0 0 4px 4px;
            border-radius: 35 20 29px 25px;
            position: fixed;             z-index: 999;
            color: #f9f7f7f7;
            border-radius: 10px;
            margin-top: 5px;
        }
            #toast.show {                 display: block;
                -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
                animation: fadein 0.5s, fadeout 0.5s 2.5s;
            }
            #toast.show {
                visibility: visible;
                -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
                animation: fadein 0.5s, fadeout 0.5s 2.5s;
            }



JavaScript


      <script>
        /*This is JavaScript function which is call in our Create.cshtml page*/
        function tostlMessage(message) {
            $('#toast').text(message);
            var x = document.getElementById("toast");
            x.className = "show";             setTimeout(function () { x.className = x.className.replace("show", ""); }, 7000000);
        };
    </script>
Mahira  khanna

Mahira khanna

I have the skills you need for you company blog, website, or other content materials

0 Comments



Report Response