sunylcumar
May 18, 2025
  311
(3 votes)

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
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
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.
Latest blogs
Create a multi-site aware custom search provider using Search & Navigation

In a multisite setup using Optimizely CMS, searching for pages can be confusing. The default CMS search regardless of search provider does not...

dada | Jun 12, 2025

Tunning Application Insights telemetry filtering in Optimizely

Application Insights is a cloud-based service designed to monitor web applications, providing insights into performance, errors, and user behavior,...

Stanisław Szołkowski | Jun 12, 2025 |

JavaScript SDK v6: Lightest, Most Efficient SDK Yet

Need a faster site and less frontend bloat? JavaScript SDK v6 is here —and it’s the lightest, smartest SDK we’ve ever released for Optimizely Featu...

Sarah Ager | Jun 11, 2025

Boosting Indexing Efficiency: Reindex Pages Directly from Optimizely’s Navigation Pane

There can be various reasons why you might want to trigger indexing or reindexing of a page/node directly from the navigation pane. In my case, we...

Praful Jangid | Jun 11, 2025