Search results

Add dynamic template in ASP.NET MVC Toast control

15 Oct 2021 / 1 minute to read

Toast supports to change templates dynamically with displaying in multiple toasts. You can change the toast properties while calling in the show method.

razor
controller.cs
Copied to clipboard
<div class="control-section" style="width:400px;margin:0 auto;">
    @Html.EJS().Toast("element").Position(p => p.X("Right").Y("Bottom")).Click("onClick").Render()
    <div id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>
    <div class="row">
        @Html.EJS().Button("show_toast").Content("Show Toast").CssClass("e-btn").Render()
    </div>
</div>
<script type="text/javascript">
    var toastFlag = 0;
    var toasts = [{ template: '2 Mail has received' },
    { template: 'User Guest Logged in' },
    { template: 'Logging in as Guest' },
    { template: 'Ticket has reserved ' },
    { template: '#templateToast' }];

    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.show(toasts[toastFlag]);
            ++toastFlag;
        }, 1000);
    document.getElementById("show_toast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show(toasts[toastFlag]);
        ++toastFlag;
        if (toastFlag === (toasts.length)) {
            toastFlag = 0;
        }
    });
    function onClick(e) {
        e.clickToClose = true;
    }
</script>
Copied to clipboard
public class HomeController : Controller
{

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