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
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.:
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
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