Preview rendering for blocks
Describes how to create a view and controller for previewing blocks in Optimizely.
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, such as inside a content area. Like pages, you can edit blocks in the All Properties view, but to preview and edit block in the On-Page Editing view, you can create a preview page used 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 all blocks:
- A block preview model
- A preview controller
- A preview view
See Content templates and Content 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
PageViewModelis 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. A new 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 : ActionControllerBase, IRenderTemplate<BlockData>, IModifyLayout
{
private readonly IContentLoader _contentLoader;
public PreviewController(IContentLoader contentLoader)
{
_contentLoader = contentLoader;
}
public IActionResult Index(IContent currentContent)
{
//As the layout requires a page for title etc we "borrow" the start page
var startPage = _contentLoader.Get<StartPage>(SiteDefinition.Current.StartPage);
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">
@Html.PropertyFor(m => m.PreviewContentArea)
</div>
</div>
<div class="row">
<div class="span8">
@Html.PropertyFor(m => m.PreviewContentArea)
</div>
</div>
<div class="row">
<div class="span4">
@Html.PropertyFor(m => m.PreviewContentArea)
</div>
</div>
The resulting outcome when editing and previewing a block in edit view.
Updated 26 days ago