Search results

Show different types of toast in ASP.NET MVC Toast control

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()
<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;
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
   = document.body;
        }, 200);
    document.getElementById("showToast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];[toastFlag]);
        if (toastFlag === (toasts.length)) {
            toastFlag = 0;
public class HomeController : Controller

    public ActionResult Index()
        return View();