---
title: Displaying the page content
---

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

> **Info:** This page is a part of a tutorial, which you should follow sequentially from beginning to end. [Go to the first page: Using the Xperience interface](https://docs.kentico.com/13tutorial/using-the-xperience-interface.md).

In the [previous step](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-core-development-tutorial/creating-the-site-layout.md) of the tutorial, you have created the basic layout and added styling for your website. In this step, you will finally see what the content stored in Xperience looks like on the live site. You now need to roll up your sleeves and write the code of your MVC application.

## You will learn about:

## Retrieving the content of pages

The dynamic content of your website's pages is created and maintained in the Xperience administration interface, and stored within the database that is shared with your MVC application.

Usually, when retrieving data to display on an MVC 5 site, we need to write code that retrieves the data, prepare controllers that handle the appropriate URL routes, and create views with corresponding models that format the data into the required HTML output. 

Xperience's _content tree-based routing feature_ handles all of this for us. We only need to provide views based on specific conventions and the system automatically ensures a controller with a matching model class to handle the request and display our pages.

## Configuring content tree-based routing

Before we can get to displaying the pages we created for our site, there is one last small thing we need to configure.

Currently, accessing the domain root of our website results in a 404 not found error. This makes sense: both pages that we created are located elsewhere. One is available at _\~/Home_, the other at _\~/MedicalCenter_. 

We want all users that access the domain root _http://localhost/Xperience13\_MEDIOClinic/_ redirected to _http://localhost/Xperience13\_MEDIOClinic/Home._ We can do that in the **Settings** application:

1. In the Xperience administration interface, open the **Settings** application.
2. In the left sidebar, navigate to **Settings** -> **URLs & SEO**.
3. Under **Content tree-based routing**, set the Home page to: _/Home_
4. Set **Home page URL behavior** to **Redirect to home page**.
5. Click **Save**.

![Configuring content tree-based routing](https://docs.kentico.com/docsassets/13tutorial/displaying-the-page-content/CTBSettings.png "Configuring content tree-based routing")

## Displaying the Home page

With the content tree-based routing feature enabled and configured, the only thing we need to do to display the **Home** page is to provide a view (.cshtml) file under _\~/Views/Shared/PageTypes/_ in the MVC project. The view needs to be named after the code name of the page type on which the page is based – _Home (MEDIO Clinic)_ in our case. 

The code name of the page type can be found on its **General** configuration tab:

1. In the Xperience administration interface, open the **Page Types**application.
2. Find the _Home (MEDIO Clinic)_ page type and click **Edit** (). The _General_ tab opens.

![Finding the page type code name](https://docs.kentico.com/docsassets/13tutorial/displaying-the-page-content/PageType_Codename.png "Finding the page type code name")

### Create the Home view

With the page type code name in hand, we need to create the corresponding view file in the designated location. When creating the view file, replace all dots with underscores ('\_').

1. Right-click on _\~/Views/Shared/PageTypes_ and select **Add** -> **View...**
2. Set the new view's properties as follows:
   1. **View name**: MEDIO\_Home
   2. **Template**: Empty
   3. **Model**: leave empty for now
3. Click **Add**.

Now we need to provide the formatting and design for pages based on the _Home (Medio Clinic)_ page type. 

1. Open the _MEDIO\_Home.cshtml_ view file.
2. In the view code, specify the following model class:

   ```csharp

   @model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.Home>

   ```

   The system passes all data from a page to this view model during routing.  You can see that we set the generated Item wrapper class as the generic parameter. This allows us to access all fields we specified earlier for the page type – _HomeText_, _HomeTextHeading_, _HomeHeader_ – in a strongly typed manner. All of our fields can be accessed via the **Model.Page.Fields** property (without the _Home_ prefix in the property name, which is trimmed by default)..
3. Set the **ViewBag.Title** value to the page's _DocumentName_ property:

   ```xml

   @{
       ViewBag.Title = Model.Page.DocumentName;
   }

   ```
4. Call the **Html.Kentico().PageBuilderStyles()** and **Html.Kentico().PageBuilderScripts** within the corresponding Razor sections (as defined in the site's _\_Layout_). The methods render links to stylesheets and scripts required for the page builder functionality.

   ```csharp

   @section styles
   {
       @* Includes stylesheets necessary for page builder functionality *@
       @Html.Kentico().PageBuilderStyles()
   }

   @section scripts
   {
       @* Includes scripts necessary for page builder functionality *@
       @Html.Kentico().PageBuilderScripts()
   }

   ```
5. From the _index.html_ file in the tutorial resources, copy the HTML code of the two \*\*elements in the body tag (styled with the _teaser_ and _content_ CSS classes) to the **Home** view. Replace the existing placeholder message and commented code.
6. In the _teaser_ section, replace the text of the paragraph element with the _Model.Page.Fields.Header_ property.
7. In the _content_ section, replace the following values:
   - The text of the heading element with the _Model.Page.Fields.TextHeading_ property.
   - The text of the paragraph element with the _Model.Page.Fields.Text_ property.
8. Call the **Html.Kentico().EditableArea** extension method with "editableArea" as a parameter inside the _content_ section's first __ element.

   > **Info:** Editable areas serve as containers for page builder widgets. Each editable area must be defined with a string identifier that is unique within the context of the given view (_editableArea_ in this case).

   ```csharp

   @Html.Kentico().EditableArea("editableArea")

   ```
9. Save your changes.

The final code of your **Home** view should look like this:

```xml

@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc

@model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.Home>

@{
    ViewBag.Title = Model.Page.DocumentName;
}

@section styles
{
    @* Includes CSS necessary for page builder functionality *@
    @Html.Kentico().PageBuilderStyles()
}
@section scripts
{
    @* Includes scripts necessary for page builder functionality *@
    @Html.Kentico().PageBuilderScripts()
}

<section class="teaser">
    <div class="col-sm-offset-3 col-sm-4">
        <p>@Model.Page.Fields.Header</p>
    </div>
    <div class="clearfix"></div>
</section>  
<section class="content">
    <div class="col-sm-offset-3 col-sm-5">
        <h1>@Model.Page.Fields.TextHeading</h1>
        <p>@Model.Page.Fields.Text</p>
        @Html.Kentico().EditableArea("editableArea")
    </div>
    <div class="clearfix"></div>
</section>

```

### Previewing your website's Home page

Let's **Build** your project and see how the page looks!

When you navigate to your website's URL (e.g., _http://localhost/Xperience13\_MEDIOClinic_), our configuration of the content tree-based routing feature ensures the request is redirected to _\~/Home_ and displayed using the _MEDIO\_Home.cshtml_ view file. All without the need to write any controllers and models, or register custom routes. 

![The Medio Clinic's Home page on the live site](https://docs.kentico.com/docsassets/13tutorial/displaying-the-page-content/home_page_preview_live_site.png "The Medio Clinic's Home page on the live site")

You can also preview the page directly in the Xperience administration interface (e.g., _http://localhost/Xperience13\_Admin_). Switch to the **Pages** application and select the **Preview** mode.

![Preview of the Medio Clinic's Home page in the administration interface](https://docs.kentico.com/docsassets/13tutorial/displaying-the-page-content/home_page_preview_admin_ui.png "Preview of the Medio Clinic's Home page in the administration interface")

Alternatively, you can switch to the **Edit** mode and use the **Page** tab, enabled for pages of the _Home_ type, to preview the page's content. Since we have also enabled the page builder and included the necessary scripts and methods required for its functionality in the corresponding view, you can see the added editable area rendered at the bottom of the page.

![Home page displayed using the Edit mode's Page tab](https://docs.kentico.com/docsassets/13tutorial/displaying-the-page-content/Edit_Home_PageBuilder.png "Home page displayed using the Edit mode's Page tab")

## Displaying the Medical center page

To format and display the _Medical center_ page, create a view that uses _IPageViewModel_ as its model class. Identically to the _Home_ page's view model, the generic parameter of the _IPageViewModel_ interface is the strongly-typed representation of the _Medical center (MEDIO Clinic)_ page type we generated previously.

This page type contains a field that is managed by a rich text editor, which means you need to handle potential HTML elements in the content (for example text styling, hyperlinks, images, etc.).

> **Note:** To display the content of the rich text editor fields in MVC views, use either the **Html.Kentico().ResolveUrls** extension method or the standard **Html.Raw** method. Both methods disable HTML encoding for the submitted value.
>
> The _ResolveUrls_ method additionally resolves relative URLs to their absolute form. The system already automatically resolves relative URLs by processing the output of all pages. But we still recommend calling the _ResolveUrls_ method for rich text fields to minimize the output filtering requirements.

1. Right-click on \~/Views/Shared/PageTypes and select **Add** -> **View...**
2. Set the new view's properties as follows:
   1. **View name**: MEDIO\_MedicalCenter
   2. **Template**: Empty
3. Set the model class to _IPageViewModel_.

   ```csharp

   @model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.MedicalCenter>

   ```
4. In the view code, set the **ViewBag.Title** value to the page's _DocumentName_ property:

   ```xml

   @{
       ViewBag.Title = Model.Page.DocumentName;
   }

   ```
5. From the _medical-center.html_ file in the tutorial resources, copy the HTML code of the two __ elements in the body tag (styled with the _teaser_ and _content_ CSS classes) to the **MedicalCenter**view.
6. In the _teaser_ section, replace the text of the paragraph tag with the _Model.Page.Fields.Header_ property.
7. In the _content_ section, replace both the heading and the paragraph with the following Razor call:

   ```csharp

   @Html.Kentico().ResolveUrls(Model.Page.Fields.Text)

   ```
8. Save your changes.

The final code of your **MedicalCenter** view should look like this:

```xml

@model Kentico.Content.Web.Mvc.Routing.IPageViewModel<CMS.DocumentEngine.Types.MEDIO.MedicalCenter>

@{
    ViewBag.Title = Model.Page.DocumentName;
}

<section class="teaser">
    <div class="col-sm-offset-3 col-sm-4">
        <p>@Model.Page.Fields.Header</p>
    </div>
    <div class="clearfix"></div>
</section>
<section class="content">
    <div class="col-sm-offset-3 col-sm-5">
        @Html.Kentico().ResolveUrls(Model.Page.Fields.Text)
    </div>
    <div class="clearfix"></div>
</section>

```

### Previewing the Medical center page

You can preview your page in the Pages application in the Xperience administration interface or click the **Live site** button to view the page in the browser. Like with the _Home_ page, content tree-based routing ensures accessing _http://localhost/Xperience13\_MEDIOClinic/MedicalCenter_ renders the correct view for the page based on its page type.

You have now built components in your MVC application that retrieve and present the content of the site's pages. Let's continue by building the website's navigation in the last step of the tutorial!

**Previous page:** [Creating the website layout](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/creating-the-website-layout.md) — **Next page:** [Creating the navigation menu](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/creating-the-navigation-menu.md)

**Completed pages:** 8 of 10