Search results

Getting Started

This section briefly explains about how to create a simple ContextMenu in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Add ContextMenu to the project

Add the HTML ejs-contextmenu tag with id attribute as #contextmenu to your Index.cshtml file and also add target element on which the ContextMenu has to be opened.

tagHelper
<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems"></ejs-contextmenu>

<style>

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

</style>

ViewBag.menuItems variable is used for bounding the items property in view page.

Bind dataSource

Populate the menu items in ContextMenu by using the items property. Here, the JSON values are passed to the ContextMenu component are generated in default.cs and assigned to ViewBag variable.

public IActionResult Index()
        {
            //define the array of JSON
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Cut"
            });
            menuItems.Add(new
            {
                text = "Copy"
            });
            menuItems.Add(new
            {
                text = "Paste"
            });
            ViewBag.menuItems = menuItems;
            return View();
        }

Output be like the below.

ContextMenu Sample

Run the application

After successful compilation of your application, simply press F5 to run the application.

The following example shows a basic ContextMenu.

tagHelper
default.cs
<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems"></ejs-contextmenu>

<style>

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

</style>
public IActionResult Index()
    {
        List<object> menuItems = new List<object>();
        menuItems.Add(new
        {
            text = "Cut"
        });
        menuItems.Add(new
        {
            text = "Copy"
        });
        menuItems.Add(new
        {
            text = "Paste"
        });
        ViewBag.menuItems = menuItems;
        return View();
    }

Rendering items with Separator

The Separators are the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the separator property. Cut, Copy, and Paste menu items are grouped using the separator property in the following sample.

tagHelper
separator.cs
@section ControlsSection{
    <div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
    <ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems"></ejs-contextmenu>

}

<style>

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

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public IActionResult Separator()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Cut"
            });
            menuItems.Add(new
            {
                text = "Copy"
            });
            menuItems.Add(new
            {
                text = "Paste"
            });
            menuItems.Add(new
            {
                separator = true
            });
            menuItems.Add(new
            {
                text = "Font"
            });
            menuItems.Add(new
            {
                text = "Paragraph"
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}

The separator property should not be given along with the other fields in the MenuItem.

See Also