In this tutorial, you will learn how to render blocks that have been added by a content editor within a view using Episerver CMS. In Episerver v6, properties contained on a page type could be rendered on a page using the EPiServer:Property control:

From Episerver v7 onwards, assuming you are using MVC and Razor you will now have access to an Episerver specific HTML helper called PropertyFor(). If you want to learn how to become a PropertyFor() guru, read on 🔥🔥🔥

Html.PropertyFor

Using the PropertyFor() method in a view is easy enough:

When you start using PropertyFor(), one of the- most important things to understanding is the markup it returns. You can use PropertyFor() to render any property type within Episerver. When you use PropertyFor() on a ContentArea, it will return all the block HTML wrapped in an HTML element. The reason why you need to care about this extra element, is that it might break your CSS.

By default, the wrapping HTML element will be a div tag. If you are integrating HTML from a static site into your Episerver site, these extra div tags can leave you scratching your head as to why the CSS integration isn't working as expected. Let us see these tags in action. The code to render a ContentArea is shown below:

Assuming the only thing this content area will render is some text:

HELLO!

The final HTML the PropertyFor() would render would be this:

The reason why the content area renders extra div tags is to allow the on-page/inline editing to work. Inline editing allows content editors to update the pages content from the page view, rather than the property editing view. You can see this in action within the Alloy sample site. In the editor, on the page view, double click on any property and you should be abel to edit it directly.

The PropertyFor() helper has a few content area specific properties that can be overloaded. Doing this will allow you to customize the HTML the helper outputs. These overloads include:

  • CustomTag: Changes the first level div tag to an element of your choice

  • CssClass: Adds a class to the first level div tag

  • ChildrenCustomTagName: Changes the second level div tag to an element of your choice

  • ChildrenCssClass: Adds a class to the second level div tag

Using these properties like this:

Would result in the helper rendering this HTML:

Being able to customize the class names and the type of HTML elements that will be rendered is very handy. For example, changing the mark-up to render a list (ul/li) instead of div tags can result in cleaner HTML

It is also possible to configure the code so the helper does not render these extra tags at all. IN general I advise against this, however, more information about how to do this can be found here.

That wraps up the basics of rendering content areas in code. Just keep in mind the PropertyFor() will wrap all your content areas within these tags. Happy Coding 🤘