How to Preview a Block in Episerver

One thing you’ll undoubtedly run into when building your first Episerver website, is trying to preview a block. Previewing a page will work as expected, but, when you try to preview a block within a ContentArea in edit mode, you see a ‘Preview is not available for this item’ error:

preview_blocks

I’ve talked previously in How To Make A Block Use Multiple Views ? A Partial View Controller Explained about the steps you need to follow in order to render partial views in 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 display 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 on 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 meta data to the template. More information can be found at the EpiSErver page Template descriptor.  Below breaks down the [TemplateDescriptor] 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)

PreviewLayout.cshtml

@{
Layout = "~/Views/Shared/Layout.cshtml";
}
<div id="wrapper">
<div role="main" id="main" class="main row">
@RenderBody()
</div>
</div>

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

Conclusion

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

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

More Posts

3 replies
    • Jon D Jones
      Jon D Jones says:

      It will display a list of all the previews in the different variant sizes, e.g. full, half, quarter etc.. it allows content editors to see how the block will look set at different sizes

      Reply

Trackbacks & Pingbacks

  1. […] I’ve talked previously about how to preview blocks in EpiServer, How to Preview a Block in Episerver […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *