Page Layouts

Page layouts determine how pages are rendered by the web rendering engine. Multiple layouts may be selectable per page model, allowing a content manager to select the appropriate layout for that particular page. Layouts are represented by Razor views. The views receive a Redakt page object as the model, containing the page content data.

We recommend to first read the section on view models for more information on how to implement page model types, if you have not yet done so.

View imports

Redakt views require classes and methods that are defined in several Redakt namespaces. To be able to access them in all your views, add these references to your _ViewImports.cshtml file. A typical _ViewImports.cshtml file looks as follows:

@using MyProject.Models
@using Redakt.Web
@using Redakt.Extensions
@using Redakt.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Redakt.Web

Inherits

Page layouts are inherited from the RedaktViewPage<TModel> abstract class, which is derived from the default RazorPage<T> class. The TModel type specifier must be a page model, a class that implements the IPageModel interface. As it is possible for layouts to be used for different page models, the TModel specifier can also be a shared base class of several page models, or even the IPageModel interface itself to allow this layout to be used with any page model.

To allow a Razor view to be used as a Redakt CMS page layout, use the Razor @inherits directive as shown in the following examples:

@inherits RedaktViewPage<ContentPage>
@{
    // This layout can be used for ContentPage type page models
    // or any page model that derives from it.
}
@inherits RedaktViewPage<IPageModel>
@{
    // This layout can be used for any page model,
    // which also makes it useful for the base _Layout.cshtml view.
}

Setting the @inherits directive adds some helper methods to the view, and removes the necessity to specify a view model explicitly. This is the recommended way of implementing Redakt layouts. Alternatively, you can use the @model directive to specify a view model without changing the base class of the view. The model that is passed into the view is of type IPublishedPage<TModel>, where TModel is the page model type. You will be able to use the page model in the way described below, but you will lose the helper methods that are on the RedaktViewPage class.

Model

After setting the @inherits directive to a Redakt view page type, the Model property of the view will be of type IPublishedPage<TModel>, where the TModel type specifier is the same page model type as you specified for the RedaktViewPage<TModel>. The IPublishedPage interface contains some properties of the page, including id, name, url, etc. The strongly typed content data itself is accessible on the Model.Content property, which will be an instance of the TModel type. The example below demonstrates how content can be retrieved from the page model.

The Model.Content property will contain the localized content for the currently requested culture. Therefore the value of this property can be different for other requests to the same page if the site is multilingual.

@inherits RedaktViewPage<ContentPage>
@{
    var pageName = Model.Name;  // The name of the page
    var introText = Model.Content.IntroText;  // Example of a string property in the content
    var image = Model.Content.Summary.MainImage;  // Example of an image property in the content
}

The layout can now be further implemented as a regular Razor view, using the data and content that is available on the view model.

Tag Helpers

One of the most powerful new features in ASP.NET Core are tag helpers. Redakt has a number of tag helpers that can be used out of the box, aiding in efficient implementation of page layouts. See the tag helpers section for more information on the available tag helpers.

Extension methods

A number of extension methods are available on the IPublishedPage interface. Add the Redakt.Extensions namespace to your _ViewImports.cshtml as described above to be able to use them in your views. The available extension methods include:

  • ParentAsync() to retrieve the parent of the page.
  • AncestorsAsync() to retrieve the ancestors of the page.
  • ChildrenAsync() to retrieve the children of the page.
  • DescendantsAsync() to retrieve all descendants of the page.
  • SiblingsAsync() to retrieve the siblings of the page.
  • NextSiblingAsync() and PreviousSiblingAsync() to retrieve the closest siblings of the page.

Beta limitations

Currently, the Redakt beta release does not support compiled views. For Redakt to recognize views as page layouts, they have to be on the target file system as .cshtml files. ASP.NET Core 2.1 and higher by default compiles views into an assembly and does not deploy the .cshtml view files with the application on publish. Therefore, your project (.csproj) file must contain the <RazorCompileOnPublish>false</RazorCompileOnPublish> setting in a property group, as described here.

This limitation is expected to be resolved before the final release of Redakt CMS.