Getting started with ASP.NET MVC ContextMenu control

22 Jul 2021 / 2 minutes to read

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

Add ContextMenu to the project

We are going to render ContextMenu component in Index.cshtml page.

razor

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
@Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.menuItems).Render()

<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.

Run the application

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

The following example shows a basic ContextMenu.

razor

default.cs

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
@Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.menuItems).Render()

<style>

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

</style>

public ActionResult 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.

razor

separator.cs

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
@Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.menuItems).Render()

<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 ActionResult 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.

Getting started with ASP.NET MVC ContextMenu control

Add ContextMenu to the project

Bind dataSource

Run the application

Rendering items with Separator

See Also