Render ContentArea without wrapping them in surrounding div

CustomContentAreaRenderer is a specialized class that overrides the default ContentAreaRenderer. It customizes the rendering behavior for content area items, specifically by rendering content items without wrapping them in a surrounding <div> element, which is typically used in the default implementation.

public class CustomContentAreaRenderer : ContentAreaRenderer
{
    protected override void RenderContentAreaItem(
    IHtmlHelper htmlHelper,
    ContentAreaItem contentAreaItem,
    string templateTag,
    string htmlTag,
    string cssClass)
    {
        if (contentAreaItem == null)
        {
            return;
        }

        var content = contentAreaItem.LoadContent();
        if (content == null)
        {
            return;
        }

        // Directly render the content item without surrounding div
        htmlHelper.RenderContentData(content, false);
    }
}

May 18, 2025

Comments

Mark Stott May 19, 2025 08:31 AM

Hello Sunil,

Thank you for sharing, as an alternative option you can also create a HTML Helper method like so, this removes the div that wraps the whole content area and changes the div that wraps the block to be a section element.:

public static IHtmlContent RenderContentAreaFor<T>(this IHtmlHelper<T> htmlHelper, Expression<Func<T, ContentArea?>> contentAreaFunction)
{
    return htmlHelper.PropertyFor(contentAreaFunction, new
    {
        HasContainer = false,
        ChildrenCustomTagName = "section"
    });
}

I've seen similar approaches to your own where additional common UI logic is applied to the containing element for the block so that the interior razor file for the block can focus just on it's own internal content.

Regards
Mark

sunylcumar May 22, 2025 03:36 PM

Hi Mark,

Thanks for the suggestion. I will try incorporating your helper method to my project.

We can use your helper method in the Razor as follows

@model YourNamespace.Models.StandardPage

@Html.RenderContentAreaFor(m => m.MainContentArea)

Please login to comment.