Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
AI OnAI Off
Rendering Content Area With Property For Creates Unwanted Div
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>
</div>
</div>
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
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.
I have the following razor template:
@using EPiServer.Core @using EPiServer.Web.Mvc.Html @model RotatorContainerBlock
Apply Now!
@Html.PropertyFor(x => x.Images, new { ChildrenCustomTagName = "li", ChildrenCssClass = "active" })
The PropertyFor above renders the following template:
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.