In the Alloy site they are using an html helper to create a multi level menu.
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
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?
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.
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?
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
Can anyone tell me how to create multilevel menu in Episerver using MVC.