---
title: Displaying reusable content and related pages
related:
  - https://docs.kentico.com/13/developing-websites/retrieving-content/displaying-page-content.md
  - https://docs.kentico.com/13/developing-websites/defining-website-content-structure/managing-page-types/reusing-existing-page-content.md
  - https://docs.kentico.com/13/managing-website-content/working-with-pages/reusing-other-pages-when-editing-content.md
  - https://docs.kentico.com/13/managing-website-content/working-with-pages/working-with-page-relationships.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

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](https://docs.kentico.com/13/developing-websites/defining-website-content-structure/managing-page-types/reusing-existing-page-content.md).
- **Named relationships** – pages can be connected together using [predefined relationships](https://docs.kentico.com/13/managing-website-content/working-with-pages/working-with-page-relationships.md).

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](https://docs.kentico.com/13/developing-websites/defining-website-content-structure/managing-page-types/reusing-existing-page-content.md) that was linked to pages by [content editors](https://docs.kentico.com/13/managing-website-content/working-with-pages/reusing-other-pages-when-editing-content.md) (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](https://docs.kentico.com/13/developing-websites/generating-classes-for-xperience-objects.md).

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:

   ```csharp

   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
           };
       }
   }

   ```

   > **Tip:** 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:

   ```csharp

   @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" />
           ...
       }
   }

   ```

   > **Tip:** By default, the pages are accessed in the same order in which they are [added by content editors on the page's Content tab](https://docs.kentico.com/13/managing-website-content/working-with-pages/reusing-other-pages-when-editing-content.md).

## Loading related pages

To retrieve pages that are connected to another page through a [named relationship](https://docs.kentico.com/13/managing-website-content/working-with-pages/working-with-page-relationships.md), use the **InRelationWith** [DocumentQuery method](https://docs.kentico.com/display/K2020/Reference+-+DocumentQuery+extension+methods) (for example together with the [generated classes](https://docs.kentico.com/13/developing-websites/generating-classes-for-xperience-objects.md) of individual page types).

```csharp title="Example"

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.