---
title: Displaying 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'll finally get to 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 live site application.

Usually, when working with data on an MVC 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 desired 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 thing we need to configure.

Currently, accessing the domain root of our website returns a default text message. 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 _\~/_ redirected to _\~/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-page-content/CTBSettings.png "Configuring content tree-based routing")

Both the domain root and _\~/Home_ URL now display the Home page. The system rewrites the home page URL to the domain root for optimal SEO – we want the home page content to only be available under a single URL.

## Disabling the default domain root message

By default, the blank project that is the base of your website your website returns a warning message when displaying the domain root. Since we'll be creating the Home page in the next steps, it's time to disable this warning message:

1. In Visual Studio, edit the application's **Startup.cs** file.
2. In the **Configure** method, comment out or delete the endpoint handling for the "/" domain root:

   ```csharp

   // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
   public void Configure(IApplicationBuilder app)
   {
       if (Environment.IsDevelopment())
       {
           app.UseDeveloperExceptionPage();
       }

       app.UseStaticFiles();

       app.UseKentico();

       app.UseCookiePolicy();

       app.UseCors();

       app.UseAuthentication();
       // app.UseAuthorization();

       app.UseEndpoints(endpoints =>
       {
           endpoints.Kentico().MapRoutes();

           /* Disables the default endpoint handling for "/"
           endpoints.MapGet("/", async context =>
           {
               await context.Response.WriteAsync("The site has not been configured yet.");
           });
           */
       });
   }

   ```
3. Save your changes.

The application is now ready to display your own website root (Home page) content.

## 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 live site 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-page-content/PageType_Codename.png "Finding the page type code name")

### Create the Home view model

With the page type code name in hand, we need to create the corresponding view file in the designated location.

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 (replace all dots in the codename with underscores)
   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. Add Xperience Tag Helpers to the page:

   ```xml

   @addTagHelper *, Kentico.Content.Web.Mvc

   ```
5. Call the **** and **** tag helpers within the corresponding Razor sections (as defined in the site's _\_Layout_). The tag helpers render links to stylesheets and scripts required by the page builder functionality.

   ```csharp

   @section styles
   {
       @* Includes CSS necessary for page builder functionality *@
       <page-builder-styles />
   }

   @section scripts
   {
       @* Includes scripts necessary for page builder functionality *@
       <page-builder-scripts />
   }

   ```
6. 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.
7. In the _teaser_ section, replace the text of the paragraph element with the _Model.Page.Fields.Header_ property.
8. 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.
9. Call the **** tag helper with the **area-identifier="editableArea"** 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).

   ```xml

   <editable-area area-identifier="editableArea" />

   ```
10. Save your changes.

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

```xml

@addTagHelper *, Kentico.Content.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 *@
    <page-builder-styles />
}
@section scripts
{
    @* Includes scripts necessary for page builder functionality *@
    <page-builder-scripts />
}

<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>
        <editable-area area-identifier="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 we start your website again (using IIS Express), 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-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., _https://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-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-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, we again 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. Add the following using statement that imports an extension method we'll need:

   ```csharp

   @using Kentico.Web.Mvc

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

   ```xml

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

   ```
5. Set the model class to _IPageViewModel_.

   ```csharp

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

   ```
6. 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.
7. In the _teaser_ section, replace the text of the paragraph tag with the _Model.Page.Fields.Header_ property.
8. In the _content_ section, replace both the heading and the paragraph with the following Razor call:

   ```csharp

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

   ```
9. Save your changes.

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

```xml

@using Kentico.Web.Mvc

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

```

Remember to **Build** your project after saving the changes.

### 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 _\~/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 site layout](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-core-development-tutorial/creating-the-site-layout.md) — **Next page:** [Creating a navigation menu](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-core-development-tutorial/creating-a-navigation-menu.md)

**Completed pages:** 8 of 10