asp.net-mvc - 为 EPiServer 块生成的 div 元素上的 CSS 类

Question

我有一个带有许多浮动块的ContentArea 。EPiServer 自动将每个块包装在一个div元素中，这是编辑模式正常运行所必需的。所以最初的一个div 变成了三个嵌套的 div：内容区域、子元素包装器和块视图。

是否可以从块视图将 CSS 类添加到子元素包装器？那么今天是什么：

div.ContentArea > div > div.my-class

变成：

div.ContentArea > div.my-class

Answer 1

如果你想避免额外的包装 div，看看这篇文章

我的猜测是这就是你应该渲染的：

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

不要在局部视图中呈现包装div元素，只呈现“内部内容”（因为无论内容区域中的每个项目都会呈现包装div元素）。

不能排除渲染内容区域时渲染的包装元素，因为这会破坏 EPiServer 中的页面编辑功能。

希望这会有所帮助并且足够清楚。

Answer 2

我最终使用了自定义内容区域渲染器：

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 3

在这里，您可以阅读有关扩展 contentarea 的所有内容，以及它们为何如此工作。 http://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/

Answer 4

通过覆盖默认内容区域可以完全删除额外的 div。我在这里写了一个相当详细的教程EpiServer 7: Extra divs in content area 如何删除它们？

不过，采用这种方法是相当极端的。如果您只在一两个地方遇到此问题，那么我建议您使用类似的东西

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

您可以在此处阅读有关这些属性如何工作的更多信息：How To Render EpiServer Blocks In Your Views Using PropertyFor