Timeout in ASP.NET CORE Toast

21 Aug 20266 minutes to read

The toast can be expired based on the timeOut property. The toast can live till the time out reaches without user interaction, a time out value is considered as a millisecond.

  • The timeOut delay can be visually represented using Progress Bar.

  • The extendedTimeOut property determines how long the toast should be displayed after a user hovers over it.

NOTE

You can terminate the process by using the showCloseButton property for destroying the toast at any time.

<div style="width:400px;margin:0 auto;">
    <div class="e-float-input"><input class="e-input" id="toast_input_index" required="" value="0"><span class="e-float-line"></span><label class="e-float-text">Enter timeOut</label></div>
    <ejs-toast id="element" width="300" height="150">
        <e-toast-position X="Right" Y="Bottom"></e-toast-position>
        <e-toast-buttonmodelprops>
            <e-toast-buttonmodelprop model="ViewBag.ToastButtons1">
            </e-toast-buttonmodelprop>
            <e-toast-buttonmodelprop model="ViewBag.ToastButtons2">
            </e-toast-buttonmodelprop>
        </e-toast-buttonmodelprops>
        <e-content-template>
            <p><img alt='Laura' class='toast-img' src='https://ej2.syncfusion.com/demos/src/toast/resource/laura.png' /><span class="name">Anjolie Stokes</span></p>
            <div class="content">
                <p>Thanks for update!</p>
            </div>
        </e-content-template>
    </ejs-toast>
    <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>
</div>
<script type="text/javascript">
    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.show();
        }, 1000);
    document.getElementById("show_toast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        var value = parseInt(document.getElementById('toast_input_index').value)
        toastObj.show({ timeOut: value });
    });
</script>
<style>
    .toast-img {
        width: 40px;
        height: 40px;
    }

    .name {
        padding-left: 20px;
        font-size: 17px;
        font-weight: 500;
    }

    .content {
        padding-left: 60px;
        font-size: 12px;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.ToastButtons1 = new DefaultButtonModel() { content = "Ignore" };
        ViewBag.ToastButtons2 = new DefaultButtonModel() { content = "reply" };
        return View();
    }
    public class DefaultButtonModel
    {
        public string content { get; set; }
    }
}

Static toast

You can prevent auto hiding in a toast as visible like static by setting zero (0) value in the timeOut Property.

<div class="control-section" style="width:400px;margin:0 auto;">
    <ejs-toast id="element" title="Matt sent you a friend request" content="You have a new friend request yet to accept" showCloseButton="true" timeOut="0">
        <e-toast-position X="Right"></e-toast-position>
    </ejs-toast>
    <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>
</div>
<script type="text/javascript">
    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.show();
        }, 1000);
    document.getElementById("show_toast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show();
    });
</script>
public class HomeController : Controller
{

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

See Also