How to open dialog on item click in ASP.NET MVC Context Menu

28 Aug 20261 minute to read

This section explains how to open a dialog on ContextMenu item click. This can be achieved by opening the dialog in the select event of the ContextMenu.

In the following sample, a Dialog opens when the user clicks the Save As... item:

CSHTML

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
@Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.menuItems).Select("itemSelect").Render()
@Html.EJS().Dialog("dialog").Header("Save As").Content("This file can be saved as PDF").Width("250px").Visible(false).Buttons(ViewBag.DialogButtons).Render()

<script>
    function dlgButtonClick() {
        ej.base.getComponent(document.getElementById('dialog'), "dialog").hide();
    }

    function itemSelect() {
        ej.base.getComponent(document.getElementById('dialog'), "dialog").show();
    }
</script>

<style>

#contextmenutarget {
    border: 1px dashed;
    height: 250px;
    padding: 10px;
    position: relative;
    text-align: center;
    color: gray;
    line-height: 17;
    font-size: 14px;
}

</style>

Dialogbutton-core.cs

public ActionResult DialogButton()
{
    ViewBag.DialogButtons = new
            {
                isPrimary = true,
                cssClass = "e-flat",
                content = "Submit",
                click = "dlgButtonClick"
            };
    return View();
}