Back in the days before MVC, when the only option of using Episerver was with web forms, we used the 'EPiServer:Property' control to render our page type properties on a page, like so:
Now we have MVC Razor and also the new addition of blocks, EPiServer have created a new MVC based approach to allow us to render our Episerver properties. This new approach is provided to us in the form of an HTML helper called PropertyFor().
To render a property in Episerver we use the 'PropertyFor' method like so:
When you start using PropertyFor, one of the first things you will probably discover quite quickly is that Episerver will return the value you care about wrapped in HTML. The most important thing to take from this statement is that the HTML returned might contain extra mark-up that you were not expecting. By default, the wrapping HTML element is a div. These extra div tags can break your CSS if you are integrating from a static site into your Episerver site and leave you scratching your head as to why the CSS integration isn't working as expected. For example when we render a ContentAre Episerver will render two extra div tags. If this was the code within the view:
In our content area we have a single text block that renders this HTML:
The final page rendering will look like this:
The reason why the content area renders extra divs is to allow inline editing to work. Inline editing allows content editors to interact with blocks and update them on the page itself rather than within the editor.
The content area also has a few properties that can be overloaded that will allow you to customize the outputted HTML. These overloads include:
- CustomTag: Changes the first level div to the element you specify
- CssClass: Adds a class to the first level div
- ChildrenCustomTagName: Changes the second level div to the element you specify
- ChildrenCssClass: dAds a class to the secondlevel div
So if I used the following markup:
The output will look like this:
On most projects being able to customize the class names and the type of tags that will be rendered will be enough. It is possible to create a custom content area that does not render anything, more information about how to do this can be found in, Remove Extra DIVs from a content area.
In today's tutorial, we've talked about how to render Episerver content like ContentAreas, Blocks, and properties in MVC views. This is one via the HTML PropertyFor helper. The PropertyFor will wrap all your properties within HTML when it returns the values. Sometimes this may cause you CSS issue. By using the overloads like CustomTag, you can change the tags the PropertyFor helper returns. You can also use the Tag property as a way of rendering different views for your content.