Sitecore MVC Presentation Concepts

In this blog post I will attempt to describe and de-mystify the key presentation concepts which are new in Sitecore MVC
03 October 2014

Prior to MVC, options were much more limited with presentation techniques in Sitecore; layouts were always done with an aspx page, and you basically had the option to create sublayouts (ascx user controls) or XSLT renderings. With the advent of full MVC support in Sitecore, there are now a lot more options for displaying content, so much so that it can be quite bewildering for the newcomer.

Layouts

Layouts in Sitecore MVC serve the same purpose as an aspx page in standard Sitecore i.e. to define the outer most html markup of the pages in your site. In MVC they reference a cshtml file instead of an aspx. One thing you will notice in a Layout definition item is a new field called “Model” which allows you to link to a RenderingModel. I will explain more about this later on, but in short a rendering model allows you to define the items and fields which are referenced by a layout or rendering.

View Renderings

View renderings in Sitecore MVC are roughly equivalent to Sublayouts in standard Sitecore ASP.NET, or XSLT renderings. The benefit of view renderings over sublayouts is that you have the ability to use the datasource out of the box without writing a single line of C# code (see here for details on how to get the datasource of a Sublayout). Compared to XSLT renderings, view renderings give you easy to use razor syntax instead of ugly XSL transforms. They are a good choice when you just want to display content from one item (or one item plus its children) - an example would be a spot or hero component.

View renderings can be configured to reference a rendering model which is a type of view model which is initialized by the Sitecore MVC controller and passed automatically to your view rendering. This is useful if you need to reference several different items for your view rendering. See the section below about Models/Rendering Models for more information.

For more about working with view renderings, take a look at part 1 of my tutorial on building a carousel in Sitecore MVC

Controller Renderings

Controller renderings in Sitecore MVC allow you to map a rendering to a controller action. When you create a controller rendering in Sitecore, you specify the controller and action names which refer to your controller class name and the action (method name). Note that if you are referencing the ‘Index’ action of your controller, you may omit the “Controller Action” field.

Controller renderings are useful when you want to perform business logic on your data, display data from an external source or multiple sources. As with view renderings, you can use the datasource item set for a controller rendering within your controller code. This means you could implement all the renderings in your solution as Controller renderings. One advantage of controller renderings over view renderings is the ability to write unit tests against your controller methods.

For more about working with controller renderings, see part 2 of my tutorial on building a carousel in Sitecore MVC

Item Renderings

Item renderings in Sitecore MVC allow you to associate a rendering with a content item. You can then render this item using its assigned rendering within a page by referencing just the item. An item rendering does not reference a cshtml file or a controller. Think of them more as a sort of placeholder.

The benefit of using an item rendering is that you just select a datasource item then Sitecore renders it with its corresponding rendering. This means you could swap out different types of component with a single step, instead of removing a rendering from a page, then adding a new one and setting it’s datasource.

Configuring Items/Templates for use with Item renderings

Let’s say you have a spot content item; you could set the value of the “Renderers” field to the ID of a View/controller rendering - better still, do this on the item’s template. Note, the Renderers field is part of the standard template, so you’ll have to check the option to display Standard Fields in the View ribbon in the content editor.

Then you have two options:

a) Create an “Item rendering” definition item

  1. Create an Item rendering under /sitecore/layout/Renderings using the template /sitecore/templates/System/Layout/Renderings/Item rendering - this is all there is to the item rendering itself as it does not reference a controller action or cshtml file
  2. Add your item rendering to a placeholder on a page
  3. Set the datasource of your item rendering to a content item. When you do this, Sitecore looks at the datasource item and sees that it has a renderer associated with it (from the ID you set in it’s Renderers field) and then renders it using that rendering. This enables you to switch out the components/renderings on a page more easily with the single step of changing the data source of the item rendering, instead of having to remove the old rendering, add a new one and set its datasource to the new content item.

b) Use Html.Sitecore().ItemRendering() in your razor code

This can be done with the following code: 

@var items = Model.SelectedItems; //this would be a model property which is a collection of Sitecore Items
@foreach (var item in items)
{
   <div>
      @Html.Sitecore().ItemRendering(item)
   </div>
}

For more about working with item renderings, see part 3 of my tutorial on building a carousel in Sitecore MVC which describes in more detail the second of the approaches mentioned above.

Models (Rendering Models in Sitecore MVC)

A model definition item in Sitecore MVC is an item which references a ‘RenderingModel’ class. An instance of this class is passed to any view rendering or layout which uses this model. The instance is created and initialized by the built-in Sitecore controller using the datasource item set on the rendering. Note, when I refer to a RenderingModel class, I mean a class inheriting from Sitecore.Mvc.Presentation.RenderingModel.

To create a Model item in Sitecore MVC, go to /sitecore/layout/Models and create a new item using the template /sitecore/templates/System/Layout/Model. In the ModelType field enter a reference to your RenderingModel class in the usual “NamespaceAndClass, AssemblyName” format. Now you can reference this model from any layout or view rendering item by selecting it in the “Model” field in the layout/view rendering definition item.

An example rendering model class is shown below which provides ‘Header’ and ‘Content’ properties for a spot rendering:

public class Spot : Sitecore.Mvc.Presentation.RenderingModel
{
    public IHtmlString Header
    {
        get { return new MvcHtmlString(Sitecore.Web.UI.WebControls.FieldRenderer.Render(base.Item, "Header")); }
    }

    public IHtmlString Content
    {
        get { return new MvcHtmlString(Sitecore.Web.UI.WebControls.FieldRenderer.Render(base.Item, "Content")); }
    }
}

This could be referenced in the view as follows:

@model Spot
<div class="spot">
    <h3>@Model.Header</h3>
    <p>@Model.Content</p>
</div>

Controllers

These are found under /sitecore/layout/Controllers/ and are related to controller renderings. They serve as a shorthand way of referencing a controller/action pair and also allow you to use a friendly name in a controller rendering instead of the usual CamelCaseClassName and ActionName.

Create a controller item using the template /sitecore/templates/System/Layout/Controller and enter values for “Controller Name” and “Action Name” which should correspond to the controller class and action in your solution. Then go to your controller rendering and in the “Controller” field enter the name of the controller item you created and leave the “Controller Action” field blank. If you leave the action field blank on the controller rendering definition item, the default ‘Index’ action will be called (if your controller has one).

Summary

The aim of this article was to give a quick overview of the key presentation components in Sitecore MVC. I will be blogging in more depth about these and other topics in the next few posts. In the meantime, if you have any questions about this article, or suggestions for a future post, please feel free to leave a comment below!

Further Reading

Tags: Sitecore MVCASP.NET MVC
comments powered by Disqus