Класс CSS для сгенерированного элемента div для блоков EPiServer

Question

У меня есть ContentArea с несколькими плавающими блоками. EPiServer автоматически упаковывает каждый блок в div- элемент, который необходим для правильной работы режима редактирования. То, что изначально является одним div, становится тремя вложенными div: область содержимого, оболочка дочернего элемента и представление блока.

Можно ли добавить классы CSS в оболочку дочернего элемента из блочного представления? Итак, что сегодня:

div.ContentArea > div > div.my-class

будет выглядеть так:

div.ContentArea > div.my-class

Answer 1

В итоге я использовал пользовательский рендер:

public class CustomContentAreaRenderer : ContentAreaRenderer 
{
    protected override string GetContentAreaItemCssClass(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
    {
        var tag = GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem);
        return string.Format("block {0} {1} {2}", GetTypeSpecificCssClasses(contentAreaItem, ContentRepository), "my own classes", tag);
    }
}

Я применяю пользовательский рендерер к контейнеру с таким кодом:

container.For<ContentAreaRenderer>().Use<CustomContentAreaRenderer>();

Спасибо за помощь!

Answer 2

Если вы хотите избежать лишних упаковок, загляните в этот пост

Я думаю, что это то, что вы должны сделать:

@Html.PropertyFor(x => x.Teasers, 
new
    {
        ChildrenCustomTagName ="div", 
        ChildrenCssClass = "my-class"
    })

Не отображать элемент div для переноса в частичном представлении, только "внутреннее содержимое" (поскольку элемент div для переноса будет отображаться независимо для каждого элемента в области содержимого).

Элемент переноса, отображаемый при визуализации области содержимого, не может быть исключен, поскольку это нарушит возможности редактирования на странице в EPiServer.

Надеюсь, это поможет и достаточно ясно.

Answer 3

Здесь вы можете прочитать все о расширении contentarea, а также о том, почему они работают так, как работают. http://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/

Answer 4

Можно полностью удалить лишние элементы div, переопределив область содержимого по умолчанию. Я написал здесь довольно подробное руководство EpiServer 7: дополнительные элементы в области содержимого, как их удалить?

Однако придерживаться этого подхода довольно экстремально. Если у вас есть эта проблема только в одном или двух местах, то я бы рекомендовал использовать что-то вроде этого

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

Вы можете узнать больше о том, как эти свойства работают здесь: Как визуализировать блоки EpiServer в ваших представлениях, используя PropertyFor