Creating a sidebar menu using view rendering and RenderingModel_Sitecore Cookbook for Developers-QQ阅读都市男生网

上QQ阅读APP看书，第一时间看更新

Creating a sidebar menu using view rendering and RenderingModel

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.

Getting ready

For this recipe, we will use the same layout file created in the previous recipe.

How to do it…

We will first create a template with some common fields required on all the content items of the site:

Create one Common Fields data template with the Title, Body, Show in Menu, Image, and Icon fields. From its standard values, set Title as $name and 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 Home item so that we can have enough items to render menu control properly. Here, $name entered 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 the Common Fields template so that these fields, along with layout details, can get inherited to all these templates.
Create content items under the Home item, 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.cshtml view in the /Views/Navigation folder 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 the Cookbook folder. In this, create a view rendering Side Menu and enter the view file path in the Path field, as shown in the following image:

Tip

It's good practice to assign an icon to each rendering, which will increase usability for content editors while working from the Experience Editor.
In Main Layout or main.cshtml that 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 the Side Menu rendering 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.

How it works…

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.

There's more…

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!