How to Preview a Block in Episerver

One thing you will need on your first Episerver website is a method to preview blocks within the editor. Previewing a page will work as expected, but, when you try to preview a block within a ContentArea, out-of-the-box you see a 'Preview is not available for this item' error, as shown below:


In How To Make A Block Use Multiple Views? A Partial View Controller Explained I covered the steps required to render partial views within Episerver. Partial views and the previewing of blocks have very similar concerns.  When we render a block within a content area, Episerver MVC looks for a matching block controller and uses that to render the block.  The important thing to remember here is that the way pages and blocks are rendered are very different.

A page displays the whole page. A block can be thought of as a MVC partial and only displays a small snippet of functionality.  When MVC tries to render a page, it looks for a matching page controller.  When MVC tries to render a block, it tries to find a matching block controller.. easy!  This is why we have two base controllers in our project for blocks and pages. Our problem arises when we try to preview a block within the editor from a content area. 

In that situation, the block effectively becomes a page as it is being viewed directly. MVC then tries to find a matching page controller for our block and then fails because we only have only created a controller that will match a block request. If you are struggling with this concept, then it is very similar to the difference between rendering a page and a partial page.  You need different controllers for different rendering modes, normal and preview.

Instead of having to create two controllers for every block (normal view and preview view) we can create an additional preview controller to handle all preview requests for any block. This controller will be called.. a preview controller.

The Preview Controller

To create a preview controller, we need to create a class that inherits from IRenderTemplate. I personally like to create a base preview block class in case we need to add in extra preview specific functionality later on

    public class PreviewBlock : BlockData

Using this approach means a very basic preview controller will look like this:

    [TemplateDescriptor(Inherited = true,
       Tags = new[] { RenderingTags.Preview },
       TemplateTypeCategory = TemplateTypeCategories.MvcController)]
    public class PreviewController : Controller, IRenderTemplate<PreviewBlock>
        private readonly DisplayOptions _displayOptions;

        private readonly TemplateResolver _templateResolver;

        private IContent currentContent;

        public PreviewController(DisplayOptions displayOptions, TemplateResolver templateResolver)
            _displayOptions = displayOptions;
            _templateResolver = templateResolver;

     public ActionResult Index(IContent currentContent)

            var startPage = epiDependencies.ContentRepository.Get<StartPage>(SiteDefinition.Current.StartPage);
            var viewModel = new PreviewViewModel(startPage, currentContent);
            return View("~/Views/Blocks/Preview.cshtml", viewModel);

The first part of the code is the [TemplateDescriptor] attribute.  The TemplateDescriptor allows us to add extra metadata to the template Below breaks down these properties:

  • TemplateType we use the TemplateTypeCategories enum. This is an Episerver property that allows you to define the type of render template the controller should perform a match on.

  • Tags property we add in RenderingTags.Preview, and RenderingTags.Edit. RenderingTags lives in EPiServer.Framework.Web and contains various options like Article, Edit, Footer, Header, Mobile, Preview, Sidebar.  For the preview controller, we only care about creating a controller match when we're in Edit or Preview mode.

Preview View Model

public class PreviewViewModel : BaseViewModel<StartPage>
        public PreviewViewModel(StartPage currentPage, IContent previewContent)
            : base(currentPage)
            this.PreviewContent = previewContent;

        public IContent PreviewContent { get; private set; }

        public IList<PreviewArea> Areas { get; private set; }

The View

The next step is creating a view for our block previews. All this will do is render the display.  I create mine in blocks:

@using EPiServer.Shell.Web.Mvc.Html
@model PreviewViewModel

  Layout = "~/Views/Shared/PreviewLayout.cshtml";

@Html.DisplayFor(x => area.ContentArea)


    Layout = "~/Views/Shared/Layout.cshtml";

<div id="wrapper">
    <div role="main" id="main" class="main row">

If you run the code above you should now see a block render in your preview.

Previewing with display options

Ok, so now we have a basic way to preview our blocks.  In the next article, we will talk about how to create a more advanced preview if you are using display options in your web project to render each variation of your block in the preview as well. How to render all your block variations in preview mode in Episerver


In today's tutorial, we've covered quite a lot of code. In Episerver when you try and view a block in the editor,  you will receive a 'No Preview Is Available' without having something to render a block... this thing is a preview controller. When we implement a preview controller, we need to trick MVC into rendering blocks as a page using TemplateTypeCategories.MvcController.  For a basic version, we can then call a block view which we created a custom preview layout for.  We also implemented our own TemplateHint view to override the default one.

Code Sample

All the above code can be downloaded in a fully working website from my GitHub account here. EpiserverDisplayOptionsAndPreview

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top