In this tutorial, you will learn about Episerver page partials and how you can create and render one within a content area. When working with Episerver we have page types and blocks. It should hopefully be obvious what a page is. A block is a component that can be rendered on a page. When content editors add content onto a page, they might want to re-use that content in different areas within the website. Just like code, they will not want to create duplicate content where possible. Duplicate content can become misaligned and takes extra effort to maintain. To be more efficient, it is possible to allow content editors to re-use page content. It is possible to associate different views to a page. Is a page partial is a component with a special view that uses a page type as its data source, with me?
When content modelling within Episerver CMS, we use a code first technique. Page and block types are defined in code. From Episerver 7 onwards, content editors can drop any type that implements the IContent interface into a content area. Being able to drop page types into content areas allows us, as developers, a unique way to render content that wasn't previously available in earlier versions of the CMS.
By default, if you try to add a page into a content area within the CMS, you will encounter an error message, No renderer available 😔. Today we are going to set up our website so we display a view for the page rather than an error message. Want to learn how, read on 🔥🔥🔥
NOTE: For extra reading, try How To Make A Block Use Multiple Views? A Partial View Controller Explained
If you are still struggling to grasp why this can be useful, let us take a real-world example. Let us say that you have a 'Meet Our Team' section on your website. You also have a specific page per employee with more information about each person. This page is powered by a page type called, Person. The page contains all the information about a sale rep and their contact details. On the 'Meet Our Team' page, you might want a summary of all the sales reps in the company. Instead of having to duplicate staff details in multiple places, you can create a content area on the 'Meet Our Team' page and then drag the staff member pages you want to be displayed in the section. Using a different renderer/view the person page can be rendered as a row in a table. Whenever you put a page in a content area it will automatically become partial and the default page view will be bypassed. Instead, Episerver will look for a corresponding page partial. This means you can have a default page controller, and a specific page partial controller to deal with the same content type.
Creating Our Controller
As we need two different ways to render content, we need two different controllers. The main page controller can be created as usual:
In a normal page controller, inherit from PageController and return a view model to the view. It's pretty easy. In order to create a partial controller, we need to create a separate controller and inherit from PartialController:
You will need to decorate this class with the TemplateDescriptor attribute and set the controller as a MvcPartialController. Instead of recalling the view with VIew, you will be returning the view using PartialView. The page partial view could then look like this:
With this code added to your solution, if you drop the Content Page into a content area, this partial view will be displayed 💥
To recap, if you want to display a specific view for a page in a content area, you will need to intercept the request from the MVC pipeline using a partial controller. In terms of architecture, you could have also solved this challenge with a global page partial controller or a template coordinator. I won't cover those here, however, if you struggle with this approach, you could look up these alternatives. You can download the code in this tutorial here. Happy Coding 🤘
