How to a render a page in a content area as a partial?

When working with Episerver we have page types and blocks. I’ve written previously about How To Make A Block Use Multiple Views ? A Partial View Controller Explained, today I’ll talk you through how to display a page type as a partial.

What is a page partial?

A page type is an easy concept to grasp.  A page type translates a class into a certain type of page that will be displayed in your Episerver site.  From Episerver 7 onwards, content editors can drop page types into content areas.  If you have ever tried to do this yourself, you will have seen an error message displayed that there is no renderer available.  Today we are going to set-up our website so we display a view rather than an error message.

Episerver_No_Render

Being able to drop page types into content areas allows us, as developers, a unique way to render content differently that wasn’t previously available, for example, say you have a Meet Our Team section on your website.  You might have a Person Page Type that displays all the information about an employee, however, you may also have a team page that contains a picture of each staff member and a quote.  Instead of having to create different content item or pages for these different types of content, you can create a content area, drag the staff member you want to display into it and then use a different renderer.

Whenever you put a page in a content area it will automatically become a partial and the default page renderer will be bypassed.  This means you can either have a default partial controller, or you can create a new page specific controller just to deal with your partial view.

In today’s post we will create a specific partial controller for our content page.

Creating Our Controller

As we need two different ways to render content, we need two different controllers.  The main page view controller is defined as usual (there is a working demo project at the bottom so don’t worry too much about the dependencies):

public class ContentPageController : BasePageController<ContentPage>
{
public ActionResult Index(ContentPage currentPage)
{
return View("Index", new ContentPageViewModel(currentPage, EpiserverDependencies));
}
}

We inherit from the Page Controller and return a view model to the view.  It’s pretty easy.

In order to create a partial controller, we need to create a new controller and set-it as a partial controller.

[TemplateDescriptor(TemplateTypeCategory = TemplateTypeCategories.MvcPartialController)]
public class ContentPagePartialController : PageController<ContentPage>
{
public ActionResult Index(ContentPage  currentPage)
{
return PartialView("/Views/Partials/ContentPage/index.cshtml", currentPage);
}
}

In here, we use the TemplateDescriptor attribute and set the controller as a MvcPartialController. Instead of returning a View we return a PartialView.vvOur partial view then looks like this

@model JonDJones.Com.Models.Pages.ContentPage
Partial View for @Model.PageTitle

Now, if you drop a Content Page into a content area, the partial view will be displayed.

Conclusion

That’s all there is to it.  If you want to display a different view for a page in a content area you will need to add in something to intercept the request from the MVC pipeline.  In today’s post we did that using a Content Page specific partial controller.

You do have other options available to you;  you can also create a global page partial controller or template co-ordinator that can handle any partial requests, or, you can use a specific partial controller for an individual page or block, like we have today.

In the real world, out of these choices there aren’t really any better or worse options. I think if you only have a handful or a partial I prefer a global solution, if you need 5 or 6 different views for a page then containing them all in a single controller makes more sense.

Working Code Example

All the above code can be downloaded in a fully working website from my github account here.

JonDJones.Com.RenderingPageTypePartials

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *