Making Razor Layouts More Flexible for Episerver

Episerver and its excellent community provide developers with many great starter sites on GitHub or the Episerver CMS Visual Studio Extension. These sites provide a good base for flexible Razor layouts; however, they have one issue, the model either requires Episerver content or is missing altogether. For example, the Alloy site layout requires a model coupled to Episerver’s PageData object. Commerce starter layouts avoid using a model altogether, since it is used for both CMS and commerce content. At Diagram, we have a simple solution, use an interface as the layout’s model.

The interface we typically use is called IWebPage, which varies from project to project, but usually has at least the components as specified below:

    public interface IWebPage
    {
        string PageTitle { get; }

       string SeoDescription { get; }

       string[] SeoKeywords { get; }

       ContentReference ContentLink { get; }

       ContentReference ParentLink { get; }

       string Language { get; }

       LayoutModel Layout { get; set; }
    }

This interface can then be used as the layout model and implemented on any view model class. There are a few properties that are Episerver specific, but those are simply a convenience that can be passed to HTML helper extensions. An example implementation of this interface on the Alloy starter PageViewModel<T> is noted below:

   public class PageViewModel : IWebPage, IPageViewModel where T : SitePageData
    {
        public PageViewModel(T currentPage)
        {
            CurrentPage = currentPage;
        }

       public T CurrentPage { get; private set; }

       public LayoutModel Layout { get; set; }

       public IContent Section { get; set; }

       public string PageTitle => CurrentPage.MetaTitle;

       public string SeoDescription => CurrentPage.MetaDescription;

       public ContentReference ContentLink => CurrentPage.ContentLink;

       public ContentReference ParentLink => CurrentPage.ParentLink;

       public string[] SeoKeywords => CurrentPage.MetaKeywords;

       public string Language => CurrentPage.LanguageBranch;
    }

Now the root layout can use these properties and the developers can leverage the same root layout for Episerver CMS and commerce content. The best part of this setup is the root layout is not only used for all the Episerver content, it can be used for any POCO (plain old class object).  As a bonus, the layout can be used with another great Episerver feature, partially routed content; which can provide custom content using a Episerver content to provide a portion of the URL link.

We are providing a re-worked Alloy project on GitHub, for any developers wanting to tryout the IWebPage layout. If you want to know more about how we can use approaches like this to make your website more flexible, please contact us, or feel free to share any other questions you might have about EPiServer development in the comments below.