Optimizely Logo
  • Products
    • Digital Experience Platform
    • Content Management System
    • Content Marketing Platform
      • Overview
      • Documentation
      • User Guide
    • Configured Commerce
    • Customized Commerce
    • Web Experimentation
      • Overview
      • Documentation
      • User Guide
      • Training
    • Feature Experimentation
      • Overview
      • Documentation
      • Training
    • Data Platform
    • Recommendations
    • Apps & Integrations
      • Labs
    • Ektron CMS
    • Product Roadmap
    • Product Migration
    • Skillset Requirements
  • Documentation
    • Get started
      • Optimizely platform
      • Content Management System
      • Customized Commerce
      • Configured Commerce
      • Campaign
      • Search & Navigation
      • Personalization
      • Visitor Intelligence
      • Content Delivery API
      • Community API
      • Service API
    • Developer guides
      • Optimizely platform
      • Digital Experience Platform
      • Content Management System
      • Customized Commerce
      • Configured Commerce
      • Search & Navigation
      • Campaign
      • Personalization
      • Tracking
      • Profile Store
      • Visitor Intelligence
      • Delivery & Experimentation
      • Content Delivery API
      • Content Definitions API
      • Content Management API
      • Community API
      • Service API
      • Forms
      • MA connectors
    • Technical overview
    • System requirements
    • Installation
    • User guide
    • APIs and libraries
      • Content Management System
      • Monetize
      • Campaign
      • Community API
      • REST APIs
    • Videos
    • Releases
    • Upgrading
      • Content Management System
      • Monetize
      • Search & Navigation
      • Forms
      • Personalization
      • Service API
  • OMVPs
    • Become a Member
    • Benefits
    • OMVP Events
    • OMVP Members
    • Application and Nomination
    • Digital Badges
  • Community
    • Events
    • Developer Updates
    • Happy Hours
      • NA
      • EMEA
      • APJ
    • Forums
    • Blogs
    • Slack
    • Product Feedback
  • Resources
    • Optimizely Nuget Feed
    • .NET
      • About .NET
      • Add-Ons
      • Why Upgrade?
    • Education
      • Business Training
      • Technical Training
      • Certification
      • Masterclasses
      • SME Program
      • Opt-Up Program
    • Videos
    • Support
  • Register
  • Log in
All Content Documentation Forums User Guide Support Help Center Blogs Releases Bug List Class libraries
People
Home / Blogs /
Taylor_Oshyn
Taylor_Oshyn
Mar 1, 2016
  5954
(9 votes)

Developing with Episerver MVC

Starting with version 7, Episerver fully supports the .NET MVC Framework and Razor syntax for presentation elements. Unlike other CMS products in the market, Episerver follows the MVC Framework patterns and standards as closely as possible. In this article I’m going to describe how the MVC Framework fits with Episerver’s data model and presentation elements.

Episerver integrates tightly with Visual Studio, so everything you need to start developing Episerver sites is readily available at the Visual Studio Gallery. Just search for the Episerver CMS Visual Studio Extension, download it, and install it. When creating a new project, select the Episerver Web Site [MVC], and it will include all the required scaffolding for your project. It will automatically download the latest Episerver DLLs for you via NuGet. You can build and run your project directly using VS’s built-in IIS Express, or by deploying to a regular IIS web site. When deploying to a regular IIS web site, make sure you attach the included MDF database (under App_Data) to any SQL server instance (Express included), and changing the connection string in web.config.

The fundamental building blocks in Episerver are Page Types. These define the content fields (Properties in Epi parlance) of the pages that will be created on the website. Additionally, by using a Template, they also define how the content is going to be displayed in the page. In MVC, we are going to separate these concepts in three parts: the Page Model, the Page Controller, and the Page View. The Page Model is the actual definition of the Page Type. It contains the fields and their content types. You create Page Model classes by using the VS template for “Page Type” included in the Episerver VS Extension. After creating a Page Model class, you can manually add more properties (fields) as needed.

The Page Controller is the intermediary between the Page Model (Type) and the View. Episerver Controllers inherit from the generic PageController class. You can use the Episerver VS Extension’s “Page Controller [MVC]” template to create these controller classes. The Page Model class is used as the parameter of the generic PageController class. With this, Epi knows what Page Model has to use to render the content. You must implement the default Index method that returns a standard ActionResult object. As you can see in the code sample, Episerver will pass an object of the Page Model type you defined as the parameter of the PageController generic class. The return clause uses the standard MVC View method, using the Page Model object as a parameter.

Finally, for the presentation of the data, we use the Page View. Following .NET MVC Framework’s conventions, the Page View must be stored under the Views folder, in a folder with the name of the controller (without the “Controller” part), and must be named Index.cshtml (since the action is called Index). You can use the Episerver VS Extension’s “Page Partial View [MVC Razor]” to create these views.

After building and deploying your code to your Episerver instance, now you can create pages based on the Page Type you just created. There is no need to create custom MVC routes, Episerver will handle everything in a content-oriented way.

Another important feature in Episerver is the capability to create modules that can be placed and reused anywhere in your site. These are called Blocks. They use a similar data model as for Pages. Instead of a Page Type, you create a Block Type. Episerver VS Extension includes a “Block Type” class template.

Some Blocks may need additional data that can’t be included in the Block Type definition (e.g. child pages in a reusable navigation menu). For this, you can create a custom model with a reference to the Block Type. You will use this Model later in your Controller to populate the additional data, and View to display it.

Similar to a Page Controller, you create a Block Controller to handle the interactions between the Type, Model and View. You can use the Episerver VS Extension’s “Block Controller [MVC]” template to create these classes. Same as Page Controllers, Block Controllers take as a parameter to the generic class the Block Type class. The Action method (Index) takes an object of Block Type class. But in your Action, you might want to create additional logic to populate the Custom Model, and pass that Model object to the View.

Finally, to render Blocks you must create a Block View. Using the same conventions as for Pages, create a new View using the Episerver VS Extension’s “Block Partial View [MVC Razor]” template. Make sure you declare the right model in the View, especially when dealing with custom models.

Make sure you put sections in your other Page Views to contain the blocks by using the @section directive.

Now you can use the Block anywhere in your site where you have block sections by dragging it from the assets pane.

In a next blog post, I’ll cover how to post a form in Episerver MVC. To get updated about this and other posts, follow us on Twitter @Oshyn_Inc, or register for our email list at http://oshyn.com/resources/blog.html and check out our website as well!

 

Mar 01, 2016

Comments

Henrik Fransas
Henrik Fransas Mar 1, 2016 08:40 PM

A good explaining on MVC, I just want to give a couple tips regarding the code

First, when you are getting pages with getchildren always filter the result with FilterForVisitors because otherwise you could end up showing links in the menu that are not accessible.

Then a little optimization is to always use IContentLoader when you are only fetching things.

Looking forward to reading the next post

Mar 2, 2016 11:01 PM

Nice to see you blogging. Also looking forward to the next post. Keep them coming!!

Please login to comment.
Latest blogs
Translating Optimizely CMS 12 UI components

Optimizely CMS 12 have been out for a while now, but still some elements haven't been properly translated resulting in a GUI defaulting to english....

Eric Herlitz | Jan 26, 2023 | Syndicated blog

Image preview in Optimizely CMS12 all properties view

With these simple steps, you can now see an Image and its Metadata, including size and dimensions, when editing an Image property in Optimizely...

Tomas Hensrud Gulla | Jan 26, 2023 | Syndicated blog

Setting up the ImageEditor in Optimizely CMS 12

Setting up certain configurations on Opimizely CMS 12 differs quite a bit from prior versions of (Episerver CMS 11 and older). Here's a small guide...

Eric Herlitz | Jan 25, 2023 | Syndicated blog

Happy Hour Returning in February

Hi everyone! It's been a while and we're excited to resume our Happy Hour in February for more learning, sharing, connecting, relaxing, and just to...

Patrick Lam | Jan 24, 2023

See all blogs
Optimizely Logo

About Optimizely

  • Optimizely.com
  • Optimizely certification
  • Job openings
  • License center

Community

  • OMVP program
  • Happy Hours
  • Forums
  • Blogs
  • Slack
  • Product Feedback

Learning resources

  • Partner portal
  • Developer guides
  • User guide
  • Video tutorials
  • GitHub
  • Optimizely Academy

Contact

Optimizely Support

See the Support page for contact information.

Feedback on Optimizely World

If you’d like to give feedback about this site, please click here. Thank you very much!


Cookie Consent

  • © Optimizely 2023
  • About Optimizely World
  • Privacy Statement
  • Terms of Use
  • Trust Center
  • Compliance