ASP.NET MVC
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Getting started with ASP.NET MVC Menu Bar control

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.

Add Menu to the project

We are going to render Menu control in Index.cshtml page.

razor
Default.cs
@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.

Bind datasource

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.

Menu Sample

Run the application

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

The following example shows a basic Menu.

razor
Default.cs
@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.

Group menu items with separator

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.

razor
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Fields(ViewBag.menuFields).Render()

The separator property should not be given along with the other fields in the MenuItem. You can also enable the separator to group horizontal menu items.

See Also

Previous
Next