In the previous recipe, you learned rendering simple field values in the layout itself. In this recipe, we will create a sidebar menu control using view rendering and RenderingModel and place them statically on layouts.
We will first create a template with some common fields required on all the content items of the site:
Create one
Common Fieldsdata template with the Title, Body, Show in Menu, Image, and Icon fields. From its standard values, set Title as$nameand tick the Show in Menu checkbox field. Also, from Layout Details, assign Main Layout to it, which we created in the previous recipe:
We will first create different subitems inside the
Homeitem so that we can have enough items to render menu control properly. Here,$nameentered in the Title field is a standard value token so that the name of the item will be stored in the Title field for newly created items. You can learn more about standard value tokens at http://goo.gl/qUE85h.Create a few templates, for example,
Product Section,Product Category,Product, and others. From their base template field, select theCommon Fieldstemplate so that these fields, along with layout details, can get inherited to all these templates.Create content items under the
Homeitem, following the/Home/<Product Section>/<Product Category>/<Product>hierarchy, and fill in their Title, Body, and other fields' values. For example, refer to the following image:
Now, we will create a menu control to show all items created on the same hierarchical level of the context item. From Visual Studio, create a
SideMenu.cshtmlview in the/Views/Navigationfolder and write the following code in it:@model RenderingModel <ol class="sidemenu"> @foreach (var item in Model.Item.Parent.Children.ToArray()) { if (@item["Show in Menu"] == "1") { <li> <a href="@Sitecore.Links.LinkManager.GetItemUrl(@item)"> @item["Title"] </a> </li> } } </ol>Now we will register this view in Sitecore. Select
/sitecore/layout/Renderings/, and create theCookbookfolder. In this, create a view renderingSide Menuand enter the view file path in the Path field, as shown in the following image:
In
Main Layoutormain.cshtmlthat we created in the previous recipe, place the following code in the appropriate place to render the menu on the page. Remember to update the item ID of theSide Menurendering in this code:<div id="sidemenu"> @Html.Sitecore().Rendering("{2383A57F-21FF-4A77-9E2A-C467F0CEDA57}") </div>Now, preview any product item; you will find that all the items at the same hierarchical levels will be displayed, as shown in the following image:
In the same way, you can also create top menu rendering. You can find its TopMenu.cshtml and SiteHelper.cs code files from the code bundle provided with this book.
Sometimes, we get a requirement to hide an item from the menu, which requires having a common field such as Show in Menu or Hide from Menu in all items under Home. So, here we created the Common Fields template with the most common fields and inherited it in other data templates rather than duplicating these fields in all templates.
Note
Use Template inheritance to reuse content definitions, which makes a developer's life easier while doing further changes in it. Read best practices for template inheritance at http://goo.gl/1ePTtF.
We generated a simple menu using a view rendering. A view accepts a view model, which can be defined in the @model directive to determine the type of the model. If you don't specify the directive, Sitecore by default passes its default model, Sitecore.Mvc.Presentation.RenderingModel, which passes the context item to the view. You can also pass custom models to views, which you will learn in the next recipe.
In step 6, we bound the view statically (hardcoded on layout), which is also called static binding, and Sitecore provides two approaches for this:
@Html.Sitecore().Rendering("{2383A57F-21FF-4A77-9E2A-C467F0CEDA57}")
@Html.Sitecore().ViewRendering("<view file relative path>")In the first approach, Sitecore itself finds the view definition from the view rendering registered in step 5. In the second approach, we can directly write the path of the view file.
Here, we rendered the Side Menu view from its parent view Main Layout. Nested views can be very useful in reusing view renderings. For example, if you need to render a list of child items in different places, for example, news, events, products, and so on with the same interface, then you can achieve all this using a single view rendering!