Navigation menus and listings

Note: This topic applies to Web Forms.

You can use the navigation menu and listing controls in Episerver CMS for many purposes, such as the creation of listings and website navigation through a top menu and submenus. This topic introduces the Episerver menu and listing controls available for creating lists of pages, recent news items, and navigational menus. The Episerver menu and listing controls have access to the Episerver data source controls, making them an important part of the website.

Episerver lists collect and display data

There are many attributes and functions available to the web control, which you access in the code-behind by typing in the control ID. Intellisense displays a list of the control's attributes and methods for selection.

Collections of pages

The Episerver menu and listing controls can handle a collection of pages contained in your Episerver site. They can obtain this collection in different ways, by setting the following attributes for the listing control:

• PageLink. Provides a page reference to a page. The children of that page become the collection used.
• PageLinkProperty. Provides the name of a property that contains a page reference, which is used as PageLink. This is a commonly used method because it lets editors define the page reference for the property.
• DataSource. Lets the control data bind to the collection retrieved by another control, which is useful when one control is most suited to retrieve the correct collection, while another may be more appropriate to render the results. Set the DataSource value to the id of the other control, using an inline data binding expression:
  

  <EPiServer:PageList DataSource='<%# ControlID %>' runat="server"... >

  Note: You can combine DataSource with one of the two attributes above, leading to a merged collection from two sources. However, for Episerver's data source controls, you should pass the data is by setting the DataSourceID attribute, rather than the inline syntax described above.

Templates controls

Episerver control lists are ASP.NET Templated Controls. The output generated by Episerver and ASP.NET web controls is performed and controlled by templates. The templates let you control the rendering of data from the control. The templates provide various options, and there is a certain way to use them. A key aspect of using the templates is specifying the appearance of the data bound to the control.

In the following code example, the PageLink property of the MenuList control is assigned the site’s start page, which is the root page to read data from. To render the contents of PageLink, insert the PageLink property between the <ItemTemplate> and </ItemTemplate> tags.

 <episerver:MenuList
    PageLink="<%#EPiServer.Core.PageReference.StartPage%>"
    runat="server" ID="Menu">
     <ItemTemplate>
         <episerver:property ID="Property1" 
         CssClass="NormalLink"
         PropertyName="PageLink" runat="server"/>
     </ItemTemplate>
</episerver:MenuList>

Using menu and listing controls

The Episerver CMS “all-in-one” listing controls are implemented according to the .NET concept of templated controls; see the ASP.NET Web Server Controls Templates. The rendering of data from Episerver list and menu controls occurs through the web controls’ templates. For information about deciding which template to use, refer to the relevant web control descriptions in this topic.

When you build Episerver solutions, use the MenuList and PageList web controls to create navigation on a main and sublevel. Use the NewsList control when you need to render different markup for the first pages in a list of pages.

As each control is designed for a certain type of list, familiarize yourself with all controls before you start developing.

You can use the following basic approaches when developing with the Episerver listing controls types of lists:

• Use specific “all-in-one” Episerver listing controls. One listing control contains the data from another listing control.
• Use Episerver data source controls in the Episerver listing control.

Episerver uses the following menu and listing web controls:

• EPiServer:PageList. Renders a page list; extends PageList with templates.
• EPiServer:MenuList. Renders a menu list of top level items; useful for navigations with a top level menu and clickable sublevels.
• EPiServer:NewsList. Renders a news list, with a specialized template for top-level news.
• EPiServer:PageTree. Renders page trees; extends PageTreeData with templates.

EPiServer:PageList

Use the PageList control to list Episerver pages. This is similar to other data controls, such as asp.Repeater. It has built-in features to use in certain scenarios, such as filtering data and adding paging to it.

Frequently used properties

Frequently used templates

EPiServer:MenuList

Use the MenuList control to create the top level menu when building website navigation. Start with the MenuList for the top level menus, and use the PageTree control for the submenus.

Frequently used properties

Frequently used templates

EPiServer:NewsList

NewsList has special templates for the first four news pages and a default NewsTemplate. If you specify NewsTemplate, it is used as fallback for the first four templates that were not set. If you defined all templates except NewsTemplate, you still see only four news pages (you only have definitions for the first four news pages).

If you have defined four templates, but only have two news pages to display, only two news pages are displayed. The NewsList control sets SortBy to PageStartPublish, and SortDirection to Descending by default. See the NewsList class for information about its properties.

Frequently used properties

Frequently used templates

EPiServer:PageTree

Use the PageTree control to develop more complex menus, such as site maps.

Frequently used properties

Frequently used templates

Related topics

• Page types and templates
• Block types and templates
• Creating a main menu
• Creating a submenu

Last updated: Oct 27, 2016