Install-Package Syncfusion.EJ2.AspNet.Core

@addTagHelper *, Syncfusion.EJ2

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

<ejs-scripts></ejs-scripts>

@* ~/Pages/Index.cshtml *@
<ejs-toast id="toast_default"
           title="Friend Request"
           content="Matt sent you a friend request."
           showCloseButton="true"
           showProgressBar="true"
           timeOut="5000">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>

<ejs-button id="showBtn" content="Show Toast" cssClass="e-btn"></ejs-button>

<script>
    setTimeout(function () {
        var toast = document.getElementById('toast_default').ej2_instances[0];
        toast.target = document.body;
        toast.show();
    }, 500);

    document.getElementById('showBtn').addEventListener('click', function () {
        var toast = document.getElementById('toast_default').ej2_instances[0];
        toast.show();
    });
</script>

<ejs-toast id="typed_toast">
    <e-toast-position X="Right" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var toasts = [
        { title: 'Success !', content: 'Record saved successfully.', cssClass: 'e-toast-success' },
        { title: 'Error !',   content: 'Failed to save record.',    cssClass: 'e-toast-danger'  },
        { title: 'Warning !', content: 'Unsaved changes present.',  cssClass: 'e-toast-warning' },
        { title: 'Info !',    content: 'Session expires in 5 min.', cssClass: 'e-toast-info'    }
    ];
    function showToast(index) {
        var toast = document.getElementById('typed_toast').ej2_instances[0];
        toast.target = document.body;
        toast.show(toasts[index]);
    }
</script>

// Predefined type — no container element needed
ejs.notifications.ToastUtility.show('Record saved successfully', 'Success', 5000);

// With full model
ejs.notifications.ToastUtility.show({
    title: 'Upload Complete',
    content: 'Your file has been uploaded.',
    timeOut: 5000,
    position: { X: 'Right', Y: 'Bottom' },
    showCloseButton: true
});

<ejs-toast id="action_toast" title="New Message" timeOut="0">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
    <e-toast-buttonmodelprops>
        <e-toast-buttonmodelprop model="ViewBag.AcceptBtn" click="onAccept"></e-toast-buttonmodelprop>
        <e-toast-buttonmodelprop model="ViewBag.DismissBtn"></e-toast-buttonmodelprop>
    </e-toast-buttonmodelprops>
</ejs-toast>

<script>
    function onAccept(e) {
        var toastEle = ej.base.closest(e.target, '.e-toast');
        document.getElementById('action_toast').ej2_instances[0].hide(toastEle);
    }
</script>

// Controller
ViewBag.AcceptBtn  = new { content = "Accept" };
ViewBag.DismissBtn = new { content = "Dismiss" };

<ejs-toast id="dup_toast" beforeOpen="onBeforeOpen" close="onClose"
           title="Alert" content="Network issue detected.">
    <e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var isOpen = false;
    function onBeforeOpen(e) {
        if (isOpen) { e.cancel = true; }
        else { isOpen = true; }
    }
    function onClose() { isOpen = false; }
</script>

<ejs-toast id="max_toast" beforeOpen="onBeforeOpen"
           title="Notification" content="New item added.">
    <e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var maxCount = 3;
    function onBeforeOpen(e) {
        var toast = document.getElementById('max_toast').ej2_instances[0];
        if (toast.element.childElementCount >= maxCount) {
            e.cancel = true;
        }
    }
</script>