Creating Multilevel menu in Episerver using MVC

Vote:
 

Can anyone tell me how to create multilevel menu in Episerver using MVC.

#122169
May 27, 2015 14:52
Vote:
 

In the Alloy site they are using an html helper to create a multi level menu.

#122321
May 30, 2015 7:44
Vote:
 

Like Erik say, look in Alloy to see how it is done there.

If you do not know how to create a Alloy-site the easies way is to download the VS Extension for EPiServer to Visual Studio and when creating a new project, select EPiServer and select to include Alloy MVC.

Read more here:

http://world.episerver.com/documentation/Items/Installation-Instructions/installing-episerver/

And find the extension here:

https://visualstudiogallery.msdn.microsoft.com/4ad95160-e72f-4355-b53e-0994d2958d3e

#122325
May 30, 2015 11:24
Vote:
 

I am curious if there is any documentation on the alloy site. I have been looking at it and see they are using. 

@Html.RenderEPiServerQuickNavigator() in _root.cshtml in shared layouts. I could not find any documentation on what this is or how it is used. Does anyone know if there is a walkthrough for the alloy site or for adding menu and navagation in general?
#122914
Jun 17, 2015 15:36
Vote:
 

Micahel, the quick navigator is the little "helper menu" that is shown in the top right corner when you are logged in to EPiServer and are viewing the site (not in edit mode). It's not part of the site, it's part of EPiServer. It looks like this: and it gives quick access to the current page in edit mode.

#122923
Jun 17, 2015 21:39
Vote:
 

ahhh gotcha!! Thank you! is there a simplified version of the alloy site? There is so much abstraction It's hard for me to follow. Or even better any documentation on building a menu with a needed HTML helper I'm assuming from scratch?

#122956
Jun 18, 2015 16:20
Vote:
 

Heads up that I might cause a religious MVC do and don't, this is only my suggest approach on the problem

I would not recommend that you have logic that starts reading content from the EPiServer API after the Controller part as they do with the HtmlHelper in Alloy.
However I would suggest that you use the MVC approach with a ViewModel similar to what is done in Alloy.

On this ViewModel you have a data structure representing the items in your multi level menu. It could look something like this

public class MenuItem
{
	public string Text { get; set; } // Since it could be something else than the name of the page

	public string Link { get; set; } // Since it could be something else than the url to the page

	public IEnumerable<MenuItem> Children { get;set; } // The next level in the menu
}

And the ViewModel could look something like this with inspiration from Alloy

public class PageViewModel<T> : IPageViewModel<T> where T : SitePageData
{
	... // The other things in your ViewModel

	public IEnumerable<MenuItem> TopLevelMenuItems { get; set; } // Here goes the first level of your menu, lower levels are found on each MenuItem.Children
}

This data structure is populated in the Controller part of the MVC Life Cycle
Simplified life cycle preview: http://techunleash-wordpress.stor.sinaapp.com/uploads/2013/06/mvcrequestcycle.png

So all you need to do in your View would be

helper MenuItemTemplate(MenuItem menuItem) // so that you can create a nested structure
{
	<li><a href="@menuItem.Link">@menuItem.Text</a></li>
	@if(menuItem.Children != null && menuItem.Children.Any())
	{
		@foreach(MenuItem item in menuItem.Children)
		{
			@MenuItemTemplate(item)
		}
	}
}

@if(Model.TopLevelMenuItems != null && Model.TopLevelMenuItems.Any())
{
	<ul>
		@foreach(MenuItem item in Model.TopLevelMenuItems)
		{
			@MenuItemTemplate(item)
		}
	</ul>
}

I don't guarantee that this code is 100% correct and compile, but I think you'll get the idea

#123252
Edited, Jun 30, 2015 10:46