This section briefly explains about how to include a simple Menu 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 Menu
control in Index.cshtml page.
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
public ActionResult Index()
{
//define the array of JSON
List<object> menuItems = new List<object>();
menuItems.Add(new
{
text = "File",
items = new List<object>()
{
new { text = "Open" },
new { text = "Save" },
new { text = "Exit" }
}
});
menuItems.Add(new
{
text = "Edit",
items = new List<object>()
{
new { text = "Cut" },
new { text = "Copy" },
new { text = "Paste" }
}
});
menuItems.Add(new
{
text = "View",
items = new List<object>()
{
new { text = "Toolbar" },
new { text = "Sidebar" },
new { text = "Fullscreen" }
}
});
menuItems.Add(new
{
text = "Tools",
items = new List<object>()
{
new { text = "Spelling & Grammar" },
new { text = "Customize" },
new { text = "Options" }
}
});
menuItems.Add(new
{
text = "Go"
});
menuItems.Add(new
{
text = "Help"
});
ViewBag.menuItems = menuItems;
return View();
}
ViewBag.menuItems
variable is used for bounding the items
property in view page.
The menu items can be rendered by assigning JSON values to ViewBag
variable in Default.cs
, and passed to the
items
property in the view
public ActionResult Index()
{
//define the array of JSON
List<object> menuItems = new List<object>() {
new {
text= "File",
items= new List<object>(){
new { text= "Open" },
new { text= "Save" },
new { text= "Exit" }
}
},
new
{
text = "Edit",
items = new List<object>(){
new { text= "Cut" },
new { text= "Copy" },
new { text= "Paste" }
}
},
new {
text= "View",
items= new List<object>(){
new { text= "Toolbar" },
new { text= "Sidebar" },
new { text= "Full Screen" }
}
},
new {
text= "Tools",
items= new List<object>(){
new { text= "Spelling & Grammar" },
new { text= "Customize" },
new { text= "Options" }
}
},
new { text= "Go" },
new { text= "Help" },
};
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 Menu.
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
public ActionResult Index()
{
//define the array of JSON
List<object> menuItems = new List<object>();
menuItems.Add(new
{
text = "File",
items = new List<object>()
{
new { text = "Open" },
new { text = "Save" },
new { text = "Exit" }
}
});
menuItems.Add(new
{
text = "Edit",
items = new List<object>()
{
new { text = "Cut" },
new { text = "Copy" },
new { text = "Paste" }
}
});
menuItems.Add(new
{
text = "View",
items = new List<object>()
{
new { text = "Toolbar" },
new { text = "Sidebar" },
new { text = "Fullscreen" }
}
});
menuItems.Add(new
{
text = "Tools",
items = new List<object>()
{
new { text = "Spelling & Grammar" },
new { text = "Customize" },
new { text = "Options" }
}
});
menuItems.Add(new
{
text = "Go"
});
menuItems.Add(new
{
text = "Help"
});
ViewBag.menuItems = menuItems;
return View();
}
This example demonstrates the basic rendering of Menu with items support. For more information about data source support, refer to the
Data Source Binding
section.
The separators are both horizontal and vertical lines used to separate the menu items.
You cannot select the separators, but you can enable separators to group the menu items
using the separator
property.
The Open
and Save
sub menu items are grouped using the separator
property in the following sample.
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Fields(ViewBag.menuFields).Render()
The
separator
property should not be given along with the other fields in theMenuItem
. You can also enable the separator to group horizontal menu items.