In this tutorial, you will learn how Episerver CMS routing differs compared to normal vanilla MVC websites. You will learn Epsierver works within the ASP.NET web request pipeline. More importantly, you will learn how to render an Episerver page in 🤔. For those of you new to C# or ASP.NET, MVC is an architectural pattern that makes it easier for you to rewrite code that is easier to maintain, test and implement. When ASP.NET first came out we only had a pattern called web-forms to build websites. Web-form components were tedious to write and even harder to test and maintain.

To allow for better web architecture, Microsoft released ASP.NET MVC as a step forward. Episerver provided MVC support in 2012. It is now 2017, so there should be no excuse why you would even consider using web forms over MVC in your new project. The benefits of using MVC over webforms has been documented enough, so I won't go over it.

Using Episerver with MVC is very easy after you understand some core topics. Episerver fully supports the .NET MVC Framework with the Razor view engine. Getting up to speed with Episerver MVC shouldn't take you very long. It's probably worth mentioning now, that the way Episerver works is near enough exactly the same way a normal ASP.NET works. The big difference is the routing 💕💕!

Introduction with Episerver and MVC

When you create a new project using the Episerver Visual Studio extension, select MVC as the installation option, click Ok a few times, then sit back and everything you need to use Episerver with MVC will be installed for you. After installing a site, the first step is to usually create a page.

The fundamental building blocks in Episerver CMS are page-types and block-types. I've talked about page-types before, here, so I won't go into too much detail in this article. We will just focus on rendering a page 🎨 !

The main point you need to consider when using MVC with Episerver is that in MVC a URL maps to a controller and an action. In Episerver this isn't the case. A URL will point to a virtual page that lives within a database. We access content using URL segments based on where the page lives in the content-tree, or, directly using a page ID. As Episerver accesses content in a different way compared to normal MVC, the way we handle routing will always be slightly different. In fact, if you try and learn any ASP.NET based CMS you will bump into the same difference.

Due to this difference in routing, you will need to use a different technique to render a page compared to a normal MVC site. Luckily, Episerver has done all the hard work for you. All you need to do is inherit from the correct types and Episerver will do the routing magic for you in the background. Sound good, lets see some code! First, page types can be defined in code. The code required to create a simple page in the CMS can be seen below:

Defining pages in code using classes is really useful. We can use this object in our controller to access page data. In Episerver MVC, we still have models, views and controllers. At a basic level, defining page types in code allow us to tick the Model part of MVC without needing to write anything else. Passing the page-type calls all the way into our views is not ideal in terms of separation of concerns. This is why with Episerver you could create a view mode. Using a view model should mean your code is less brittle when things change. Using a view model will also allow for easier unit testing. Unit testing page types directly is not ideal! An example of a base view model to wrap any age type is shown below:

There are loads of ways of creating view models. The code above details what is probably the most standard approach to view model creation for developers using Episerver CMS. It's not my personal favourite, however, we will go with it for this tutorial. If you want to strictly follow a good separation of concerns, you should never expose page-type properties directly within a view without mapping them using an intermediary layer first. Also, using base types like the one above has pros and cons. It will help reduce the amount of code you need to write, however, it can make it harder to test and if you need to use different types. Base types can lead to code smells in the future.

Next, we need to create a controller to intercepts page requests. When we work with Episerver we don't use the normal vanilla MVC controllers, instead, we use a special Episerver Controller base-type, called PageController. If you use reflection on PageControllerEpiserver you will see that the untimely controller still inherits from the generic vanilla. MVC controller class. PageController additionally adds some Episerver specific features as well. When you create an Episerver controller, you will still need to implement a default Index method. If your controller does not have one, Episerver will throw an error:

The last part of the puzzle is to render the HTML. This is done within a view. The view is pretty much the same as a normal MVC one:

Following the normal .NET MVC convention, you will need to create your views within a folder called 'View' within your solutions webroot. For each page type and controller you create, you will need to create a corresponding view. The name of the view file should match the controller name. The important part to remember is that you DO NOT add the word 'Controller' at the end of the view name. If you have a page type called ContentPageController, you would create a file called 'ContentPage'.

Adding all sites views within the view folder will make it harder to manage the view files later on. A better approach is to put the related controller views into a folder instead. The name of the folder should match the controller name (again remove the word controller from the name). Within this folder, the main view will need to be called index.cshtml. The reason for calling it index is that it needs to match the name of the default Index action method within the controller. If everything has been successfully set up, now when you load a page it should now load 💥💥💥.

I'm hoping that since you've read this tutorial, you should realize that implementing MVC with Episerver is pretty simple. There are a few concepts that you need to understand as the way Episerver works is slightly different to how normal MVC works. Happy Coding 🤘