How To Display Episerver Blocks In Your MVC Views Using The PropertyFor Helper

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:

<EPiServer:Property runat="server" PropertyName="MainContentArea" />

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().

Html.PropertyFor

To render a property in Episerver we use the PropertyFor method like so:

public class StartPage : PageData
{
public virtual ContentReference MainContentArea{ get; set; }
}
@model StartPage
@Html.PropertyFor(x => x.MainContentArea)

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

tags, so say we have this in our Episerver view
<div="row>
@Html.PropertyFor(x => x.MainContentArea)
</div>

In our content area we have a single text block that render this HTML:

HELLO!

The final page rendering will look like this:

<div="row>
<div>
<div>
HELLO!
</div>
</div>
</div>

The reason why Episerver renders these extra divs is to allow the back-end editor to work. These div means you can do all the cool click and dragging of blocks into content areas. Episerver then made the decision to render the edit view and the live view the same way.

Handily for us, Episerver provides some extra overloads we can add into our PropertyFor helper to change the tags. If you are reading this and you really hate the idea of extra tags you can read my other tutorial : Extra divs in content area how to remove them ?.

I would say removing div tags completely is pretty extreme. On most projects I’ve worked on, these extra div’s might only cause a handful of issues, in these circumstances you can get away with just using the overloads below:

  • 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:

@Html.PropertyFor(x => Model.MainContentArea,
new
{
CustomTag = "ul",
CssClass = "list",
ChildrenCustomTagName = "li",
ChildrenCssClass = "list_item",
Tag = string.Empty
})

The output will look like this:

<ul class="list">
<li class="list_item">
HELLO!
</li>
</ul>

One important thing to note about these extra properties is that they only apply when you render content through a content area due to how the default display template for ContentArea works. If you render a normal block directly for example, the overloads will be ignored.

As you can see from the basic example, because Episerver allows developers to change the extra mark-up that the PropertyFor creates, in most circumstances it doesn’t create you too many headaches. If you need different tags or classes output in the html, you can just specify them and Episerver will do the rest.

The Tag Tag!

Another property that I’ve talked about previously in : How To Make A Block Use Multiple Views ? A Partial View Controller Explained

By passing in different tag values into your PropertyFor Tag property you can then choose different views for your content areas, block and properties. This is really useful compared to the old web forms way as it means you can render different displays without having to write different controls!

The last part I’ll cover quickly is how to render tags only in edit mode. I’ve personally never needed to do this in any of my projects, but you never know… If you need to add in your own custom editor styles when you use PropertyFor<> you can use the EditContainerClass.

@Html.PropertyFor(x => Model.MainContentArea,
new
{
EditContainerClass= "editorStyle",
})

Conclusion

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.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *