Episerver has a great capability that allows content to rendered inside content areas called partial views. This allows an alternative rendering of a piece of content when displayed in content areas. Its often used for teaser type capability where editors take something from the tree and drags it onto a content area. However it's not possible to preview what these partial views will look like easily without actually dragging them onto a content area and trying it.

I wanted editors to be able to see what a partial view would look like and also allow them to edit the content behind it using on page edit before publishing some content. This can be done using a preview controller and a display channel to allow switching to a partial view preview (even if it's not the exact use that content channels are meant to be used for!).

Seeing it in action

By switching the display channel to "Partial View Preview" it means it's possible to see how any content could look when dragging into a a content area. With appropriate templating it also means that the teaser properties that are normally only ever editable in the forms view will also work for on page editing too:

Implementation

The display channel looks as follows:

public class PartialViewDisplayChannel : DisplayChannel
{
    public const string PartialViewDisplayChannelName = "Partial View Preview";

    public override string ChannelName => PartialViewDisplayChannelName;

    public override bool IsActive(HttpContextBase context) => false;
}

There also needs to be a controller to handle the preview rendering. The example below is based on the standard preview controller that comes with Episerver Foundation. Many Episerver projects have preview controllers so I have highlighted the changes required to make it a partial view preview controller:

 

Getting it

This code has been submitted as a pull request to Episerver Foundation so should be reviewed and approved soon: https://github.com/episerver/Foundation/pull/459.

Comments

Recommendations for you