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.
We are going to render ContextMenu
component in Index.cshtml page.
<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.
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.
After successful compilation of your application, simply press F5
to run the application.
The following example shows a basic ContextMenu.
<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();
}
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.
<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 theMenuItem
.