Preview rendering for blocks

Describes how to create a view and controller for previewing blocks in Optimizely Content Management System (CMS).

This topic describes how to create a view and controller for previewing blocks in Optimizely Content Management System (CMS). The preview adds on-page editing functionality, and a realistic view of what the block will look like when added to content areas with different widths.

Shared blocks are rendered in the context of a page, for example inside a content area. Like pages, blocks can be edited in the all properties editing view, but to be able to preview and edit them in the on-page edit view, you can create a preview page used to render blocks in edit view. A block template is typically a partial template like a partial MVC controller, or a partial view. The rendering is using the built-in Preview tag in the EPiServer.Framework.Web namespace.

Create a block preview template

In this example we created these components to build a preview that can be used for all blocks:

A block preview page type
A block edit page view model
A preview controller
A preview view

See Page types and templates and Block types and templates for information on how to create page types, controllers and views.

Block preview page type

Example: The block preview page type with a content area.

namespace MyEpiserverSite.Models.Pages
      {
        public class PreviewBlock : PageData
          {
            public IContent PreviewContent { get; set; }
            public ContentArea ContentArea { get; set; }
          
            public PreviewBlock(PageData currentPage,IContent previewContent) 
                : base(currentPage)
              {
                this.PreviewContent = previewContent;
                this.ContentArea = new ContentArea();
                this.ContentArea.Items.Add(new ContentAreaItem
                  {
                    ContentLink = this.PreviewContent.ContentLink
                  });
              }
          }
      }

Block edit page view model

Example: View model for the block.

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

namespace MyEpiserverSite.Models.ViewModels
      {
        public class BlockEditPageViewModel : IPageViewModel<SitePageData>
          {
            public BlockEditPageViewModel(PageData page, IContent content)
              {
                previewBlock = new PreviewBlock(page, content);
                CurrentPage = page as SitePageData;
              }
            public PreviewBlock previewBlock { get; set; }
            public SitePageData CurrentPage { get; set; }
          }
      }

Preview controller

PreviewController inherits from the ActionControllerBase and implements IRenderTemplate<BlockData>, making the controller able to render block types. The Index method is overridden and gets the start page as rendering context. A new instance of the PreviewBlock page type 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. If the site is using dependency injection this example should be changed to take the IContentLoader dependency as constructor injection instead.

namespace MyEpiserverSite.Controllers
      {
        [TemplateDescriptor(Inherited=true,
          TemplateTypeCategory = TemplateTypeCategories.MvcController, 
          Tags = new[]{RenderingTags.Preview, RenderingTags.Edit},
          AvailableWithoutTag =false)]
    
        public class PreviewController : ActionControllerBase, IRenderTemplate<BlockData>
       
          {
            public ActionResult Index(IContent currentContent)
              {
                var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
                var startPage = contentLoader.Get<PageData>(ContentReference.StartPage);
                var model = new BlockEditPageViewModel(startPage, currentContent);
                return View(model);
              }
          }
      }

Preview view

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

@model MyEpiserverSite.Models.ViewModels.BlockEditPageViewModel
    
    <div class="row">
      <div class="span12">
        @Html.PropertyFor(m => m.previewBlock.ContentArea)
      </div>
    </div>
    
    <div class="row">
      <div class="span8">
        @Html.PropertyFor(m => m.previewBlock.ContentArea)
      </div>
    </div>
    
    <div class="row">
      <div class="span4">
        @Html.PropertyFor(m => m.previewBlock.ContentArea)
      </div>
    </div>

The resulting outcome when editing and previewing a block in edit view.

Updated 5 months ago

What’s Next

Adding editing attributes