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:

 preview_blocks

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

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

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

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:

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

Within 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.

All the above code can be downloaded in a fully working website from my github account here. #ILoveEpiserver