Rendering Content Area With Property For Creates Unwanted Div

Jonathon Price

Vote:

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" })
    
    
        Apply Now!

The PropertyFor above renders the following template:



    
        A different headline goes here
        Learn more

The final render I get is:


        


    
        A different headline goes here
        Learn more about Edison

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.

#116514

Jan 31, 2015 7:27

Jonathon Price

Vote:

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.

#116518

Jan 31, 2015 7:36

Eric

Vote:

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.

#116534

Feb 01, 2015 23:21

valdis

Vote:

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);

#120512

Edited, Apr 20, 2015 0:37

gabed123 - Jun 27, 2019 21:37

Exactly what I was looking for!