Show different types of toast

17 Feb 20223 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;">
    @Html.EJS().Toast("element").Position(p => p.X("Right").Y("Bottom")).Render()
    <div class="row">
        @Html.EJS().Button("showToast").Content("Show Types").CssClass("e-btn").Render()
    </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();
    }
}