SaaS CMS has officially launched! Learn more now.

Rendering Content Area With Property For Creates Unwanted Div


I have the following razor template:

@using EPiServer.Core
@using EPiServer.Web.Mvc.Html

@model RotatorContainerBlock

    @Html.PropertyFor(x => x.Images, new { ChildrenCustomTagName = "li", ChildrenCssClass = "active" })

The PropertyFor above renders the following template:

A different headline goes here

Learn more

The final render I get is:

As you can see from above, the PropertyFor is rendering an extra div.  At first it was rendering two divs, but I then set the ChildrenCustomTagName to li and now I just get the outermost div.  Is there anyway to turn override this?  It is creating invalid HTML.   If there isn't, I will look at creating my own replacement Html Helper.

Jan 31, 2015 7:27

Nevermind, figured it out.  Just not using it quite right.  Still learning EPiServer, but loving every minute of the learning process!

Changed my first Razor Template to this:

@using EPiServer.Core
@using EPiServer.Web.Mvc.Html

@model RotatorContainerBlock

<div class="HomeRotatingBanner" data-delay="7">
    @Html.PropertyFor(x => x.Images, new { CustomTag = "ul", CssClass="slides", ChildrenCustomTagName = "li", ChildrenCssClass = "active" })
    <div class="applyButton">
        <a href="#">Apply Now!</a>

Now my instead of a div wrapper I get the ul wrapper and the children elements are all li.

Jan 31, 2015 7:36

You can change the rendering of contentareas with displaytemplates as well. But if you change rendering completly you should be aware of when doing so you need to fix a lot of the edit-stuff that episerver add while inside editmode. This is the case of the extra div. If the div did not exist episerver could not hook to any html-tag. But as mentioned you can change this by using a displaytemplate and do the magic your self by using Html.EditAttributes on your customized contentarea instead.

I always go with default behavior but if needed I use the same aproach you did or alter a specific contentarea by using UIHint-attribute for that specific property.

Feb 01, 2015 23:21

Old topic, but probably worth sharing. If you want to get rid of enclosing <div> element for content area you can set this before returning view result:

ViewData.Add(RenderSettings.HasContainerElement, false);
Edited, Apr 20, 2015 0:37
gabed123 - Jun 27, 2019 21:37
Exactly what I was looking for!
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.