Search results

Show different types of toast

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
tagHelper
controller.cs
<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();
    }
}