In this tutorial, you will learn how to create a page type within Episerver CMS and hook it into an MVC pipeline. The aim of this tutorial is to help people brand new to Episerver learn how to get started creating a page-type within Episerver. Sounds good, then read on.

Creating a Page-type

First, you will need to create a page type. A page type is like a page template. It defines a type of page that a content editor can create in the CMS. A page type will be made up of properties. The properties define what data content editors can add to a page. You will need to create a new page type for each new type of page that you want the content editor to be able to use within the system. Creating ap age type is done in code by creating a new class. The code to define a page type is pretty simple and looks like this:

This class defines a very simple Episerver page that that contains a content area property. A content area is a property that will allow content editors to drag Episerver blocks inside of it. To create a new page type, inherit from the PageData base class. You will also need to decorate your class with the [ContentType] attribute. [Content Type] takes several properties.

  • Name: The name will be the template name content editors will see within the Episerver editor

  • GUID: The GUID will be a unique ID (this is needed to prevent collision issues if you ever need to import/export pages)

  • Description: The group name is a way to group templates within the editor. If you

    • GroupName: Which tab a property appears under in the CMS

If want a more detailed overview of these types, I suggest you read, Episever Page Types. With a page type defined you will need a way to render the page on your website, this is done by creating a page controller!

Creating a Controller

In this tutorial I will only show you the code to create a very basic controller to help you understand the basics, however, if you want to start writing code for a production environment, I suggest you head on over to, Episerver and MVC to learn a little more! Let's see the code required to create and hook up a controller to a page type:

 The code above is similar to how you would structure a normal MVC controller. The main difference is that within a normal CMS controller you would inherit from MVC.Controller instead of EPiServer.Web.Mvc.PageController. Also notice that I pass in the page type that I want the controller to be associated with as T. Within the index action, the corresponding page type is also passed as a parameter.

When a page request is made, Episerver will auto hook up the routing for you. You will not need to do anything else. Defining a page type in code is great as it means you will have a strongly typed way to access all the page related data. Episerver does all the CMS generation automatically for you in the background, meaning it's really easy for us as developers to define some templates and then get that data back.

Creating a View

The final part of the puzzle is the HTML. This is done ina normal MVC view:

In this example, I'm using the page type directly in my view. In production, I suggest that you consider using a view model instead of just passing the page type directly. Within the page view, you can then access the corresponding CMS data using IntelliSense. That really is everything you need to get going. Happy Coding 🤘.