Content Component

The Content component provides content to ContentPlaceHolder regions in a MasterPage layout. It emulates ASP.NET Web Forms' <asp:Content> control for gradual migration to Blazor.

Web Forms → Blazor Comparison

<%@ Page MasterPageFile="~/Site.Master" %>

<asp:Content
    ContentPlaceHolderID="MainContent"
    runat="server">
    <h1>Welcome</h1>
    <p>Page body goes here.</p>
</asp:Content>

<asp:Content
    ContentPlaceHolderID="Sidebar"
    runat="server">
    <nav>Side navigation</nav>
</asp:Content>

<MasterPage>
    <ContentPlaceHolder ID="MainContent">
        <p>Default main content</p>
    </ContentPlaceHolder>
    <ContentPlaceHolder ID="Sidebar">
        <p>Default sidebar</p>
    </ContentPlaceHolder>
</MasterPage>

<Content ContentPlaceHolderID="MainContent">
    <h1>Welcome</h1>
    <p>Page body goes here.</p>
</Content>

Basic Content with ContentPlaceHolderID

The ContentPlaceHolderID parameter links this Content block to a named ContentPlaceHolder region. The ChildContent replaces the placeholder's default content.

<MasterPage>
    <ContentPlaceHolder ID="DemoHeader">
        <p>Default header</p>
    </ContentPlaceHolder>
    <ContentPlaceHolder ID="DemoBody">
        <p>Default body (not replaced)</p>
    </ContentPlaceHolder>
    <Content ContentPlaceHolderID="DemoHeader">
        <div>Custom Header injected via Content</div>
    </Content>
</MasterPage>

Multiple Content Regions

A MasterPage can define several ContentPlaceHolder regions. Each Content targets a specific region by ContentPlaceHolderID.

<MasterPage>
    <div class="header">
        <ContentPlaceHolder ID="MultiHeader">Default</ContentPlaceHolder>
    </div>
    <div class="body">
        <ContentPlaceHolder ID="MultiMain">Default</ContentPlaceHolder>
    </div>
    <div class="footer">
        <ContentPlaceHolder ID="MultiFooter">Default</ContentPlaceHolder>
    </div>
    <Content ContentPlaceHolderID="MultiHeader">My Application</Content>
    <Content ContentPlaceHolderID="MultiMain">Welcome content</Content>
    <Content ContentPlaceHolderID="MultiFooter">Footer content</Content>
</MasterPage>

Dynamic Content

The ChildContent render fragment can include dynamic Blazor expressions and interactive elements, just like any other Blazor child content.

<Content ContentPlaceHolderID="DynamicArea">
    <p>Message: <strong>@message</strong></p>
    <button @onclick="UpdateMessage">Change Message</button>
</Content>

@code {
    private string message = "Hello from Content!";
    private void UpdateMessage() =>
        message = "Updated at " + DateTime.Now.ToLongTimeString();
}

Key Parameters