Show different types of toast

6 Dec 20243 minutes to read

The Syncfusion® ASP.NET Core toast has the following predefined styles that can be defined using the cssClass property for achieving different types of toast:

Class Description
e-toast-success Represents a positive toast
e-toast-info Represents an informative toast
e-toast-warning Represents a toast with caution
e-toast-danger Represents a negative toast 
<div style="width:400px;margin:0 auto;">
    <ejs-toast id="element">
        <e-toast-position X="Right" Y="Bottom"></e-toast-position>
    </ejs-toast>
    <div class="row">
        <ejs-button id="showToast" content="Show Types" cssClass="e-btn"></ejs-button>
    </div>
</div>
<script type="text/javascript">
    var toasts = [
        { title: 'Warning !', content: 'There was a problem with your network connection.', cssClass: 'e-toast-warning' },
        { title: 'Success !', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success' },
        { title: 'Error !', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger' },
        { title: 'Information !', content: 'Please read the comments carefully.', cssClass: 'e-toast-info' }];
    var toastFlag = 0;
    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.show(toasts[toastFlag]);
            ++toastFlag;
        }, 200);
    document.getElementById("showToast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show(toasts[toastFlag]);
        ++toastFlag;
        if (toastFlag === (toasts.length)) {
            toastFlag = 0;
        }
    });
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}