Displaying reusable content and related pages

The system provides the following ways to connect and reuse pages:

In both cases, the purpose and function of the page connections depends on the website’s implementation. Developers prepare code in the MVC live site application to load the related page content and reuse it in any required way.

Displaying reusable content

The following steps describe how to display reusable page content that was linked to pages by content editors (via a field with the Pages data type and form control). The reused page content is accessible through the Fields property of the given page type’s generated class.

  1. Open your MVC project in Visual Studio.

  2. Create a view model used to represent the page type and fill it with any data you require. All fields specified for a given page type are exposed by the Fields property. In the following example, an ArticleViewModel is instantiated with an Article page’s Title,Summary,TextTeaser, and all of its linked pages stored in the RelatedArticles property:

     public class ArticleViewModel
         public string Title { get; set; }
         public string Summary { get; set; }
         public string Text { get; set; }
         public DocumentAttachment Teaser { get; set; }
         // Represents a collection of shared content
         public IEnumerable<ArticleViewModel> RelatedArticles { get; set; }
         // Creates a view model instance for a given Article
         public static ArticleViewModel GetViewModel(Article article)
             return new ArticleViewModel
                 // Iterates over the collection of shared content
                 // converts items of the 'Article' type to their respective view models        
                 RelatedArticles = article.Fields.RelatedArticles.OfType<Article>().Select(GetViewModel),
                 Title = article.Fields.Title,            
                 Summary = article.Fields.Summary,
                 Text = article.Fields.Text,
                 Teaser = article.Fields.Teaser

    We recommend creating a separate view model for each page type you need to include in the collection of shared content.

  3. Pass the model to a view.

  4. Access the individual related pages stored in the model. For example:

     @model ArticleViewModel
     @if (Model.RelatedArticles.Any())
         // Iterates over each of the pages of a specific type in the same order in which they are added on the page's Content tab
         @foreach (var article in Model.RelatedArticles)
             // Displays the image stored in the model's 'Teaser' field
             <img src="@Url.Kentico().Attachment(article.Teaser) class="article-tile-image" />

    By default, the pages are accessed in the same order in which they are added by content editors on the page’s Content tab.

To retrieve pages that are connected to another page through a named relationship, use the InRelationWith DocumentQuery method (for example together with the generated classes of individual page types).


private readonly IPageRetriever pageRetriever;

// Gets an instance of the IPageRetriever service using dependency injection
public ExampleController(IPageRetriever pageRetriever)
    this.pageRetriever = pageRetriever;

public ActionResult Index()
    // Gets the article page for which you want to load related pages (other articles)
    Article mainArticle = pageRetriever.Retrieve<Article>( query => query
                            .Path(nodeAliasPath, PathTypeEnum.Single))

    // Gets a collection of articles that are connected through a relationship with the 'HasRelatedTopic' code name
    var relatedArticles = pageRetriever.Retrieve<Article>( query => query
                                .InRelationWith(mainArticle.NodeGuid, "HasRelatedTopic"));

You can then pass the data of the retrieved pages to a view and display any required content.