Preview rendering for blocks

4 min

The preview adds Visual Builder functionality and a realistic view of the block's appearance when added to content areas with different widths.

Shared blocks are rendered in the context of a page, such as inside a content area. Like pages, you can edit blocks in the All Properties view, but to preview and edit blocks in the Visual Builder view, you can create a preview page to render blocks in edit view. A block template is typically a partial template like a view component or a partial view. The rendering is using the built-in Preview tag in the EPiServer.Framework.Web namespace.

Create a block preview template

The following example creates these components to build a preview that you can use for blocks:

A block preview model

A preview controller

A preview view

See Content templates and Content typesContent types for information on how to create page types, controllers, and views.

Block preview model

Example: The block preview model with a content area.

📘 Note The PageViewModel is a pattern from the Alloy sample site and is not required if the site is not based on Alloy.

namespace AlloyTemplates.Models.ViewModels {
  public class PreviewModel: PageViewModel<SitePageData> {
    public PreviewModel(SitePageData currentPage, IContent previewContent): base(currentPage) {
      PreviewContentArea = new ContentArea();
      PreviewContentArea.Items.Add(new ContentAreaItem {
        ContentLink = previewContent.ContentLink
      });
    }

    public ContentArea PreviewContentArea {
      get;
      set;
    }
  }
}

Preview controller

PreviewController inherits from the ActionControllerBase and implements IRenderTemplate<BlockData>, letting the controller render block types. The Index method is overridden and gets the start page as rendering context. An instance of the PreviewModel is created, and the block is programmatically added to the content area. The controller has a TemplateDescriptor Preview tag, ensuring that it is only used for on-page editing.

Example: The preview controller.

namespace AlloyTemplates.Controllers {
  [TemplateDescriptor(
    Inherited = true,
    TemplateTypeCategory = TemplateTypeCategories.MvcController, //Required as controllers for blocks are registered as MvcPartialController by default
    Tags = new [] {
      RenderingTags.Preview, RenderingTags.Edit
    },
    AvailableWithoutTag = false)]
  [VisitorGroupImpersonation]
  [RequireClientResources]
  public class PreviewController(
      IContentLoader contentLoader,
      TemplateResolver templateResolver,
      IApplicationResolver applicationResolver,
      DisplayOptions displayOptions) : ActionControllerBase,   IRenderTemplate<BlockData>, IModifyLayout
  {
      public async Task<IActionResult> Index(IContent currentContent) {
          var application = await _applicationResolver.GetByContextAsync  (cancellationToken);
          var website = application as InProcessWebsite;
          var EntryPoint = website?.EntryPoint;
          var startPage = _contentLoader.Get<StartPage>(EntryPoint);
          var model = new PreviewModel(startPage, currentContent);
  
          return View(model);
      }
  
      public void ModifyLayout(LayoutModel layoutModel) {
          layoutModel.HideHeader = true;
          layoutModel.HideFooter = true;
      }
  }
}

Preview view

Example: View for rendering the block in different widths depending on context.

@model PreviewModel
    
<div class="row">
  <div class="span12" epi-property="@Model.PreviewContentArea" />
</div>

<div class="row">
  <div class="span8" epi-property="@Model.PreviewContentArea" />
</div>
    
<div class="row">
  <div class="span4" epi-property="@Model.PreviewContentArea" />
</div>