Displaying reusable content and related pages

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

• Fields reusing other pages – page fields of a specific type can store links to other existing pages.
• Named relationships – pages can be connected together using predefined relationships.

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,Text, Teaser, and all of its linked pages stored in the RelatedArticles property:

   Copy

   
   
   
    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:

   Copy

   
   
   
    @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.

Loading related pages

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))
                            .FirstOrDefault();

    // 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.