Create a submenu with EPiServer:PageTree
Describes how to use the EPiServer:PageTree control to list a page’s subpages.
Important
This topic applies to Web Forms.
Create a submenu with the EPiServer:PageTree
control as follows:
- Add a new Optimizely Content Management System (CMS) web control to the project. In this example the control has been named
SubMenu
. - In the SubMenu.ascx file, add an CMS PageTree control
EPiServer:PageTree
. The control ID value was namedSubMenu
in this example. - Set the
ShowRootPage
attribute to true to display the root page at the top of the page tree. - The context for the
PageTree
is retrieved from the control’s page link attribute. In this example, it is set to theMainMenu
control attributeOpenTopPage
(gets the open top page) and occurs in the code-behindOnLoad
function. - In the
PageTree
list, display each page’s name as a link to that page; use thePageLink
property of the current page. - Make the code in the templates dynamic, displaying the page names as links to the pages, by using the CMS
PageLink
property. - Place <ItemTemplate> tags around the property, displaying each subpage’s name as a link.
<ItemTemplate> <EPiServer:Property PropertyName="PageLink" runat="server" /> </ItemTemplate>
- To clearly denote to the user which page is being displayed, use the <SelectedItemTemplate> template. The Container object exposes relevant properties for each item in the list.
- Enhance the appearance of the control by adding more templates.
- In the code-behind for
SubMenu
, you need to establish which page’s subpages shall be listed as a page tree. The following code declares a privateMenuList
, and writes a get/set function that gets and/or sets the data source for this control.private MenuList _menuList; public MenuList MenuList { get { return _menuList; } set { _menuList = value; } }
- In the master page’s
OnLoad
function, assign the values for the MainMenu control to theSubMenu
.protected override void OnLoad(System.EventArgs e) { base.OnLoad(e); SubMenu.MenuList = MainMenu.MenuList; }
- In the master page, register the
SubMenu
control on the page. Add theSubMenu
control in the appropriate location in the master page.
The submenu (and main menu) should be complete and working now. - Build the solution and use your web browser to verify the links displayed in the top level menu by clicking on them. The left-centered menu should display links to the pages below the selected team in the website structure. (Compare to the page tree displayed in Edit mode).
- Verify that the navigation is working by clicking on the links.
SubMenu code example markup
<episerver:pagetree ShowRootPage="false" runat="server" id="Menu">
<IndentTemplate>
<ul>
</IndentTemplate>
<ItemHeaderTemplate>
<li>
</ItemHeaderTemplate>
<ItemTemplate>
<EPiServer:Property PropertyName="PageLink" runat="server" />
</ItemTemplate>
<SelectedItemTemplate>
<EPiServer:Property CssClass="selected" PropertyName="PageName" runat="server" />
</SelectedItemTemplate>
<ItemFooterTemplate>
</li>
</ItemFooterTemplate>
<UnindentTemplate>
</ul>
</UnindentTemplate>
</episerver:pagetree>
SubMenu code example code-behind
public partial class SubMenu : UserControlBase
{
private MenuList _menuList;
/// <summary>
/// Gets or sets the data source for this control
/// </summary>
public MenuList MenuList
{
get { return _menuList; }
set { _menuList = value; }
}
protected override void OnLoad(System.EventArgs e)
{
base.OnLoad(e);
if (MenuList == null)
{
return;
}
Menu.PageLink = MenuList.OpenTopPage;
Menu.DataBind();
}
}
Updated 5 months ago