• Documentation
  InstallationUsing the Kentico interfaceDeveloping websitesConfiguring KenticoManaging usersSecuring websitesDeploying websitesManaging website contentMultilingual websitesMacro expressionsExternal utilitiesIntegrating 3rd party systemsCustom developmentE-commerce featuresOn-line marketing featuresCommunity featuresRunning Kentico on Microsoft AzureUsing Amazon web services with KenticoCertified extensionsReferencesRelease notes - Kentico 11
• Tutorial
  Getting started with KenticoUsing the Kentico interfaceSite development overviewPortal Engine developmentMVC development
• API Examples
  Content managementOn-line marketingE-commerceSocial and CommunityDevelopmentConfiguration

Creating a view model for the menu items

1. In Visual Studio, create a new Menu subfolder in the Models folder.

2. Select the Menu subfolder and add a new MenuItemViewModel class.

3. Define the view model properties using the following code:

   C#

   Copy

   namespace MedioMVC.Models.Menu
   {
       public class MenuItemViewModel
       {
           // Defines the properties of the MenuItem view model
           public string MenuItemText { get; set; }
           public string MenuItemRelativeUrl { get; set; }         
       }
   }

4. Save your changes.

Creating the Menu controller

The controller class will define a GetMenu action that loads and displays the content of the site's navigation menu. The action retrieves the menu data using the generated MenuItemProvider class, then loads all pages which content editors selected as menu items, and organizes the data into a collection of models that gets passed to the view.

1. In the Controllers folder, create a new MenuControllerclass.

2. Replace the default code with the following:

   C#

   Copy

   using System.Linq;
   using System.Web.Mvc;
   
   using CMS.DocumentEngine;
   using CMS.DocumentEngine.Types.MEDIO;
   
   using MedioMVC.Models.Menu;
   
   namespace MedioMVC.Controllers
   {
       public class MenuController : Controller
       {
           // GET: Loads and displays the site's navigation menu
           public ActionResult GetMenu()
           {
               // Loads all menu items using the page type's generated provider
               // Uses the menu item order from the content tree in the Kentico 'Pages' application
               var menuItems = MenuItemProvider.GetMenuItems()
                   .Columns("MenuItemText", "MenuItemPage")
                   .OrderBy("NodeOrder");
   
               // Loads the pages selected within the menu items
               // The data only contains values of the NodeGUID identifier column
               var pages = DocumentHelper.GetDocuments()
                   .WhereIn("NodeGUID", menuItems.Select(item => item.MenuItemPage).ToList())
                   .Columns("NodeGUID");
   
               // Creates a collection of view models based on the menu item and page data
               var model = menuItems.Select(item => new MenuItemViewModel()
               {
                   MenuItemText = item.MenuItemText,
                   // Gets the URL for the page whose GUID matches the given menu item's selected page
                   MenuItemRelativeUrl = pages.FirstOrDefault(page => page.NodeGUID == item.MenuItemPage).RelativeURL
               });
   
               return PartialView("_SiteMenu", model);
           }
       }
   }

3. Save your changes.

Creating the navigation menu view

A navigation menu is an element that appears on most pages of a website. For this reason, you will define the menu's output in a partial view, which can then be added into the site's main layout (or into the views of other pages if necessary).

1. In the MenuController, right-click the PartialView method and select Add View.

2. Fill in the following values:

   • View name: _SiteMenu
   • Template: Empty
   • Create as a partial view: Yes (selected)

3. In the view code, add a using statement for the MedioMVC.Model.Menu namespace.

4. Add the @model directive and specify the model type as an IEnumerable collection of MenuItemViewModel.

5. Define the menu output by rendering HTML links within a <nav> element (using the menu item URL and text values from the model). The partial view code should look like this:

   C#

   Copy

   @using MedioMVC.Models.Menu;
   @model IEnumerable<MenuItemViewModel>
   
   <nav>
       @foreach (MenuItemViewModel menuItem in Model)
       {
           @* Iterates through the view model collection and renders HTML links for the menu items *@
           <a href="@Url.Content(menuItem.MenuItemRelativeUrl)" title="@menuItem.MenuItemText">@menuItem.MenuItemText</a>
       }
   </nav>

6. Save your changes.

Updating the website layout

You have coded the functionality behind the navigation menu. Let's put the code to use and add the menu to the site's layout.

1. Edit your _Layout.cshtml file (in the Views/Shared folder).

2. Locate the section defined by <nav> tags, and replace it with the Html.Action Razor call. Invoke the GetMenu action in the Menu controller.

3. Locate the <a> element in the <header> section that displays the MEDIO clinic logo, and set the value of the href tag to: ~/

   The tilde character with the forward slash (~/) ensures that the Medio clinic logo link targets the root page of the website.

Your final _Layout.cshtml markup should look like this:

Build your project and test your navigation menu on the live site website. Because the original layout already contained hard-coded HTML links, you won't see a difference on the live site. However, you can test the menu's dynamic functionality by adding another menu item in the Kentico administration interface (Pages application), or by changing the order of the Home and Medical center items. The implementation you've built ensures any menu item changes are immediately displayed in the navigation menu.