Sitecore MVC Tutorial – View Renderings

This is my second Sitecore MVC post following on from Creating your first Sitecore MVC website. In this post I’ll extend what was built in that post to create a dynamic menu using a View Rendering.

The first step is to create the template that will represent a menu item. Using Sitecore rocks, in the ‘Custom’ folder I created in my previous post I have created another folder called ‘Global’ and inside that the new template, ‘Menu Item’.


My template consists of a single field called ‘Link’ of type General Link.


Now that the template is created I will create my menu items in the content tree. I’ve created a new folder under ‘Content’ called ‘Menu’ and changed its Insert Options to allow the ‘Menu Item’ template I just created. I’ve then added the same menu items that are in the downloaded template the linked them to the correct page. Be sure to set the Title for each link as this is used for the link text later.


Now that the template and items have been created the next step is to create a Model and View to render the menu. I’ll be using a View Rendering in Sitecore.  A View Rendering allows you to specify the View and Model but you don’t need to worry about the Controller. For View Renderings Sitecore uses it’s own internal Controller to render the View. This is good for simple Renderings as it saves you time wiring up Controllers for every View.

As I’m using Glass Mapper I’m going to use it to create a query directly on my model. This would normally require me to create a Controller to build my Model, but thanks to Glass Mapper I can just use a View Rendering.

First I’m going to create the my Model for the menu which will use the auto-generated ‘Menu_Item’ class created by TDS. In the Models folder of my project I have created a new Model called ‘MainMenu’.

using Glass.Mapper.Sc.Configuration.Attributes;
using MySitecoreWebsite.Web.Models.sitecore.templates.Custom.Global;
using System.Collections.Generic;

namespace MySitecoreWebsite.Web.Models
    public class MainMenu
        [SitecoreQuery("/sitecore/content/Menu/*[@@templatename='Menu Item']")]
        public IEnumerable<Menu_Item> MenuItems { get; set; }

All I have done here is added one property which is a list of the auto-generated ‘Menu_Item’ class to represent my menu items. I have then applied the SitecoreQuery attribute from Glass Mapper containing a query to locate my menu items in the tree. Now for the View which simply iterates through these items and renders the links.

@inherits Glass.Mapper.Sc.Web.Mvc.GlassView<MySitecoreWebsite.Web.Models.MainMenu>

    @foreach (var menuItem in @Model.MenuItems)
            @using (BeginRenderLink(menuItem, x => x.Link))

In this View I’m using Glass Mapper’s BeginRenderLink method as based on the template I used the link text needs to be inside a span tag. If I didn’t need the span I could just use RenderLink. Both of these methods are explained here.

The next step is to create my Rendering in Sitecore. First I’m going to create a new Rendering Folder under Layouts > Renderings called ‘Custom’ and inside that a new View Rendering called ‘Main Menu’.


In the View Rendering there are two fields to set; first set the Path field to the location of the physical view file. Secondly I need to set the Model field to the fully qualified type name.


The final step is to use this rendering in my base layout. In _Layout.ascx I have replaced the static menu with a static binding to the View Rendering.

<div id="header">
    <div id="logo">
        <a href="/">
            <img src="Assets/img/logo.jpg" alt="" /></a>

You can see here I’m using the Rendering HTML helper method and passing the ID of the Rendering. This isn’t a typical statically bound rendering as it still requires the item in Sitecore to specify the Model to use, and I reference that item instead of the physical path to the View.

Posted on by Joe in ASP.NET, C#, MVC, Sitecore

Add a Comment