UpdatePanel Component Samples

The UpdatePanel component emulates the Web Forms asp:UpdatePanel for migration compatibility. In Web Forms, UpdatePanel enabled partial-page updates via AJAX. In Blazor, all updates are already partial — Blazor's diff-based rendering only updates changed DOM elements. The UpdatePanel component renders a <div> (Block mode) or <span> (Inline mode) wrapper around its content.

Block Mode (Default)

Renders as a <div> element. This is the default RenderMode.

This content is inside an UpdatePanel in Block mode (renders as a <div>).

Click count: 0

<UpdatePanel>
    <ChildContent>
        <p>Content inside Block mode UpdatePanel.</p>
        <button @onclick="IncrementBlock">Click Me</button>
    </ChildContent>
</UpdatePanel>

Inline Mode

Renders as a <span> element, useful for inline content.

The time is: 6:00:04 PM

<p>
    The time is:
    <UpdatePanel RenderMode="UpdatePanelRenderMode.Inline">
        <ChildContent>
            <strong>@currentTime</strong>
        </ChildContent>
    </UpdatePanel>
</p>

UpdatePanel Properties

The component also supports UpdateMode and ChildrenAsTriggers properties for migration compatibility, though in Blazor these have no behavioral effect since rendering is always differential.

This UpdatePanel has UpdateMode="Conditional" and ChildrenAsTriggers="false". In Web Forms these controlled when the panel refreshed. In Blazor, the component simply preserves these properties for migration compatibility.

Web Forms Equivalent

<!-- Web Forms -->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:Label ID="lblMessage" runat="server" />
        <asp:Button ID="btnClick" runat="server" Text="Click Me" OnClick="btnClick_Click" />
    </ContentTemplate>
</asp:UpdatePanel>