ContentPlaceHolder Component

The ContentPlaceHolder component defines a replaceable content region within a MasterPage layout. It emulates ASP.NET Web Forms' <asp:ContentPlaceHolder> control.

Web Forms → Blazor Comparison

Web Forms — Site.Master

<%@ Master Language="C#" %>
<html>
<body>
    <div class="header">My Site</div>
    <asp:ContentPlaceHolder ID="MainContent"
         runat="server">
        <p>Default content shown when
           no child page overrides it.</p>
    </asp:ContentPlaceHolder>
    <div class="footer">Footer</div>
</body>
</html>

Blazor with BWFC

<MasterPage>
    <div class="header">My Site</div>
    <ContentPlaceHolder ID="MainContent">
        <p>Default content shown when
           no Content component overrides it.</p>
    </ContentPlaceHolder>
    <div class="footer">Footer</div>
</MasterPage>

Default Content (No Override)

When no Content component targets a ContentPlaceHolder, the placeholder renders its ChildContent as default content.

Default Content: This is the default content defined inside the ContentPlaceHolder. It appears because no Content component overrides it.

<MasterPage>
    <ContentPlaceHolder ID="DefaultDemo">
        <div>This default content shows because
             no Content component overrides it.</div>
    </ContentPlaceHolder>
</MasterPage>

Content Replacement

When a Content component targets a placeholder by matching ContentPlaceHolderID, the default content is replaced.

Region A (replaced):

Default Region A content

Region B (not replaced — shows default):

✅ This default Region B content is visible because no Content targets it.

<MasterPage>
    <ContentPlaceHolder ID="RegionA">
        <p>Default Region A content</p>
    </ContentPlaceHolder>

    <ContentPlaceHolder ID="RegionB">
        <div>Default Region B (not replaced)</div>
    </ContentPlaceHolder>

    <Content ContentPlaceHolderID="RegionA">
        <div>Region A was replaced!</div>
    </Content>
</MasterPage>

Interactive Replacement Toggle

This demo lets you toggle whether a Content component overrides the placeholder, showing how the default content appears and disappears.

📋 Default content — no override is active.

<MasterPage>
    <ContentPlaceHolder ID="ToggleArea">
        <div>Default content</div>
    </ContentPlaceHolder>
    @if (showOverride)
    {
        <Content ContentPlaceHolderID="ToggleArea">
            <div>Override active!</div>
        </Content>
    }
</MasterPage>

@code {
    private bool showOverride = false;
    private void ToggleOverride() => showOverride = !showOverride;
}

Key Parameters

Parameter	Type	Description
`ID`	`string`	Unique identifier for the placeholder. Content components reference this ID via `ContentPlaceHolderID`.
`ChildContent`	`RenderFragment`	Default markup rendered when no `Content` component overrides this region.

Migration Note: ContentPlaceHolder is a bridge component for migrating Web Forms MasterPage patterns. In native Blazor, layouts use @Body for the main content area and RenderFragment parameters for additional sections.