The standard way of rendering properties when building a site using EPiServer 7 and ASP.NET MVC is the PropertyFor HTML helper extension method. The Web Forms equivalent is the EPiServer:Property control which can contain a nested RenderSettings control with which we can control some aspects of how the property is rendered. When using the PropertyFor method it’s possible to do the same by passing an object with one or several of those settings as properties. However, the names of these settings aren’t obvious and when using PropertyFor IntelliSense doesn’t help as they are passed as members of an anonymous object.

Therefore, for my own sanity's sense, here’s a quick reference. Please let me know if I’ve missed any setting!

Quick reference

• CustomTag
• CssClass
• ChildrenCustomTagName
• ChildrenCssClass
• EditContainerClass

Custom tag

Property name: CustomTag. Example:

@Html.PropertyFor(x => x.PageName, new { CustomTag = "span"})

Note that the CustomTag primarily applies to edit mode when using MVC, with some notable exceptions such as content areas. For instance for a string property no tag is rendered when a page is displayed in view mode. For such types EPiServer will however add a wrapper for the text when displaying it in edit mode and the CustomTag can be used to control what type of element EPiServer wraps it in.

For some property types, such as LinkItemCollection, almost no settings have any effect when using the default rendering. It’s however possible to work around that using custom display templates.

Custom CSS class

Property name: CssClass. Example:

@Html.PropertyFor(x => x.Teasers, new { CssClass = "row" })

Passing a custom CSS class only affects those properties for which a HTML element is created when using PropertyFor, such as content areas. In other words, in the below example the CssClass setting won’t actually do anything at all as no element is created when rendering string properties.

//The CSS class won't be added as no element is created
@Html.PropertyFor(x => x.PageName, new { CssClass = "big" })

Customizing wrapping elements for blocks in content areas

When rendering content area properties a wrapping element will be inserted for each block or other type of content in the content area. The tag can be customized using ChildrenCustomTagName. It’s also possible to add CSS classes to these elements using ChildrenCssClass. Example:

@Html.PropertyFor(x => x.Teasers, 
    new
        {
            ChildrenCustomTagName ="span", 
            ChildrenCssClass = "block"
        })

Customizing wrapping elements in edit mode

When properties are rendered in edit mode EPiServer inserts a wrapping element around the property’s value. By default this wrapping element is a div with a CSS class named epi-editContainer which forces the element to have a minimum width and height. It’s possible to change that CSS class to a custom class using EditContainerClass. By utilizing this we can customize the size and other characteristics of the wrapping element which I’ve personally found very useful in some specific cases. Example:

@Html.PropertyFor(x => x.PageName, 
    new { EditContainerClass = "inline" })

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.