---
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 the beginning to the end. [Go to the first page: Getting started with Kentico](https://docs.kentico.com/k12sptutorial/getting-started-with-kentico.md).

In the [previous step](https://docs.kentico.com/k12sptutorial/mvc-development/creating-the-website-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 Kentico 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 on MVC sites

The dynamic content of your website's pages is created and maintained in the Kentico administration interface, and stored within the database that is shared with your MVC application. To display the data on the live site, you need to write code that retrieves the data, prepare controllers that handle the appropriate URL routes, and create views that format the data into the required HTML output. 

We recommend using the strongly-typed classes that you generated for your page types to retrieve page content. In this tutorial, we will use the generated provider to retrieve the latest published versions of pages. However, on more advanced websites, you can also retrieve the current edited version of pages under workflow (before they are published to the live site), and use the data for the content displayed in preview mode. This helps website editors see what their edits look like before publishing.

Well-crafted MVC applications are known for their good performance. With Kentico, the separation of concerns typical for the MVC development pattern is reinforced by the fact that all content editing occurs in a separate application. To keep the site's performance optimal, we strongly recommend that you carefully adjust all data retrieval API calls to only load the data columns that you pass and display in the corresponding views.

## Developing the Home page

To display your website's Home page, you will create a controller class and an appropriate view. Additionally, you will use a view model class to pass page data from the controller to the view. See the comments in the code blocks for more detailed information about the implementation.

### Creating the Home view model

1. In Visual Studio, create a new **Home** subfolder in the **Models** folder.
2. Select the _Home_ subfolder and add a new **HomeViewModel** class.
3. Define the view model properties and their mappings using the following code:

   ```csharp

   using CMS.DocumentEngine.Types.MEDIO;

   namespace MEDIOClinic.Models
   {
       public class HomeViewModel
       {
           // Defines the properties of the Home view model
           public string DocumentName { get; }
           public string HomeHeader { get; }
           public string HomeTextHeading { get; }
           public string HomeText { get; }

           // Maps the data from the Home page type's fields to the view model properties
           public HomeViewModel(Home homePage)
           {
               DocumentName = homePage.DocumentName;
               HomeHeader = homePage.Fields.Header;
               HomeTextHeading = homePage.Fields.TextHeading;
               HomeText = homePage.Fields.Text;
           }
       }
   }

   ```
4. Save your changes.

### Modifying the Home controller

1. In the **Controllers** folder, open the **HomeController** class.
2. Replace the default code with the following:

   ```csharp

   using System.Web.Mvc;

   using CMS.DocumentEngine.Types.MEDIO;
   using CMS.SiteProvider;

   using Kentico.PageBuilder.Web.Mvc;
   using Kentico.Web.Mvc;

   using MEDIOClinic.Models;

   namespace MEDIOClinic.Controllers
   {
       public class HomeController : Controller
       {
           // GET: Loads and displays the site's Home page
           public ActionResult Index()
           {
               // Retrieves the Home page using the 'GetHome' method from the page type's generated provider
               Home homeNode = HomeProvider.GetHome("/Home", "en-us", SiteContext.CurrentSiteName)
                                           .Columns("DocumentName", "DocumentID", "HomeHeader", "HomeTextHeading", "HomeText");

               // Returns a 404 error if retrieval is unsuccessful
               if (homeNode == null)
               {
                   return HttpNotFound();
               }

               // Creates a new HomeViewModel instance based on the page data
               var homeModel = new HomeViewModel(homeNode);                     

               // Initializes the page builder with the DocumentID of the page
               HttpContext.Kentico().PageBuilder().Initialize(homeNode.DocumentID);

               return View(homeModel);
           }
       }
   }

   ```
3. Save your changes.

> **Note:** The generated provider classes offer several methods you can use to retrieve the data of content-only pages. To get a specific page, we recommend using the node alias path (_/Home_ in the example above), which corresponds with the structure of the site's content tree in the Pages application. Alternatively, you can also use the _Node ID_ or _Node GUID_ identifiers, which you can find on the _General_ tab in the Pages application.

### Updating the Home view

Now you need to format the content of the _Home_ page in a view corresponding to the _Index_ action of the _HomeController:_

1. Open the **Views/Home/Index.cshtml** view file.
2. Directly under the using statements, add the _@model_ directive referencing the _HomeViewModel_ class created earlier

   ```csharp

   @model MEDIOClinic.Models.HomeViewModel

   ```
3. Set the **ViewBag.Title** value to the model's _DocumentName_ property:

   ```xml

   @{
       ViewBag.Title = Model.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.HomeHeader_ property.
7. In the _content_ section, replace the following values:
   - The text of the heading element with the _Model.HomeTextHeading_ property.
   - The text of the paragraph element with the _Model.HomeText_ 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.Web.Mvc
@using Kentico.PageBuilder.Web.Mvc

@model MEDIOClinic.Models.HomeViewModel

@{
    ViewBag.Title = Model.DocumentName;
}

@section styles
{
    @* Includes stylesheets 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.HomeHeader</p>
    </div>
    <div class="clearfix"></div>
</section>

<section class="content">
    <div class="col-sm-offset-3 col-sm-5">
        <h1>@Model.HomeTextHeading</h1>
        <p>@Model.HomeText</p>

        @* Inserts a page builder editable area, allowing modular content composition using widgets *@
        @Html.Kentico().EditableArea("editableArea")
    </div>
    <div class="clearfix"></div>
</section>

```

### Previewing your website's Home page

Your code retrieves data from the Kentico site and displays it on the live site. Let's **Build** your project and see how the page looks!

When you navigate to your website's URL (e.g., _http://localhost/Kentico12\_MEDIOClinic_), the default _**{controller}/{action}/{id}**_ route mapped in the project's **RouteConfig** targets the _Home_ controller's _Index_ action and displays your _Home_ page as the website's root page.

![The Medio Clinic's Home page on the live site](https://docs.kentico.com/docsassets/k12sptutorial/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 Kentico administration interface (e.g., _http://localhost/Kentico12\_Admin_). Switch to the **Pages** application and select the **Preview** mode.

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

The preview feature works because you have the _builder.UsePreview_ feature enabled in your MVC project's _ApplicationConfig_ class, and the Home page type has the _/Home_ URL pattern matching the route of your Home controller's Index action. You can also navigate to the live site directly from the administration interface by opening the application list and clicking the **Live site** button at the bottom of the list.

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/k12sptutorial/displaying-the-page-content/Edit_Home_PageBuilder.png "Home page displayed using the Edit mode's Page tab")

## Developing the Medical center page

### Creating the Medical center view model

1. In Visual Studio, create a new **MedicalCenter** subfolder in the **Models** folder.
2. Select the _MedicalCenter_ subfolder and add a new **MedicalCenterViewModel** class.
3. Define the view model properties and their mappings using the following code:

   ```csharp

   using CMS.DocumentEngine.Types.MEDIO;

   namespace MEDIOClinic.Models
   {
       public class MedicalCenterViewModel
       {
           // Defines the properties of the MedicalCenter view model
           public string DocumentName { get; }
           public string MedicalCenterHeader { get; }
           public string MedicalCenterText { get; }

           // Maps the data from the MedicalCenter page type's fields to the view model properties
           public MedicalCenterViewModel(MedicalCenter medicalCenterPage)
           {
               DocumentName = medicalCenterPage.DocumentName;
               MedicalCenterHeader = medicalCenterPage.Fields.Header;
               MedicalCenterText = medicalCenterPage.Fields.Text;
           }
       }
   }

   ```
4. Save your changes.

### Creating the Medical center controller

1. In the **Controllers** folder, create a new **MedicalCenterController** class.
2. Replace the default controller code with the following:

   ```csharp

   using System.Web.Mvc;

   using CMS.DocumentEngine.Types.MEDIO;
   using CMS.SiteProvider;

   using MEDIOClinic.Models;

   namespace MEDIOClinic.Controllers
   {
       public class MedicalCenterController : Controller
       {
           // GET: Loads and displays the site's Medical center page
           public ActionResult Index()
           {
               // Retrieves the Medical center page using the 'GetMedicalCenter' method from the page type's generated provider
               MedicalCenter medicalCenterNode =
                   MedicalCenterProvider.GetMedicalCenter("/Medical-Center", "en-us", SiteContext.CurrentSiteName)
                                        .Columns("DocumentName", "MedicalCenterHeader", "MedicalCenterText");

               // Creates a new MedicalCenterViewModel instance based on the page data
               var medicalCenterModel = new MedicalCenterViewModel(medicalCenterNode);

               return View(medicalCenterModel);
           }
       }
   }

   ```
3. Save your changes.

### Creating the Medical center view

To define the output code of the _Medical center_ page, create a view that uses _MedicalCenterViewModel_ as its model class. The 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 the **Index()** action in the _MedicalCenterController_ class and select **Add View**.
2. Set the new view's properties as follows:
   1. **View name**: Index
   2. **Template**: Empty
   3. **Model class**: MedicalCenterViewModel (MEDIOClinic.Models)
3. In the view code, set the **ViewBag.Title** value to the model's _DocumentName_ property:

   ```xml

   @{
       ViewBag.Title = Model.DocumentName;
   }

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

   ```csharp

   @Html.Kentico().ResolveUrls(Model.MedicalCenterText)

   ```
7. Save your changes.

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

```xml

@model MEDIOClinic.Models.MedicalCenterViewModel

@{
    ViewBag.Title = Model.DocumentName;
}

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

```

### Previewing the Medical center page

You can preview your page in the Pages application in the Kentico administration interface or click the **Live site** button to view the page in the browser. Like with the Home page, the default route mapped in the project's **RouteConfig** ensures that the _http://localhost/Kentico12\_MEDIOClinic/MedicalCenter_ URL targets the corresponding controller and its default _Index_ action.

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/k12sptutorial/mvc-development/creating-the-website-layout.md) — **Next page:** [Creating the navigation menu](https://docs.kentico.com/k12sptutorial/mvc-development/creating-the-navigation-menu.md)

**Completed pages:** 8 of 10