UpdatePanel Component

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.

---

1. Simple ChildContent (Blazor-Native Syntax)

The simplest approach — just wrap your content directly inside the UpdatePanel.

<UpdatePanel>
    <p>Direct child content</p>
    <Button Text="Increment" OnClick="IncrementSimple" />
</UpdatePanel>

---

2. Web Forms ContentTemplate Syntax

Supports the Web Forms <ContentTemplate> syntax for migration compatibility. This eliminates RZ10012 warnings during L1 migration and matches the original Web Forms pattern exactly.

<UpdatePanel>
    <ContentTemplate>
        <p>Content using ContentTemplate syntax</p>
        <Button Text="Increment" OnClick="IncrementContentTemplate" />
    </ContentTemplate>
</UpdatePanel>

---

3. Block Mode (Default)

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

<UpdatePanel RenderMode="UpdatePanelRenderMode.Block">
    <ContentTemplate>
        <p>Block mode content (renders as div)</p>
        <Button Text="Increment" OnClick="IncrementBlock" />
    </ContentTemplate>
</UpdatePanel>

---

4. Inline Mode

Renders as a <span> element, useful for inline content that should not break the text flow.

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

---

5. Styled UpdatePanel (New in This Version)

UpdatePanel now inherits from BaseStyledComponent, so you can apply CSS classes and styling properties directly.

<UpdatePanel BackColor="WebColor.LightYellow" 
             BorderStyle="BorderStyle.Solid" 
             BorderWidth="Unit.Pixel(2)" 
             BorderColor="WebColor.Orange"
             CssClass="p-3 mb-3">
    <ContentTemplate>
        <p>Styled content</p>
        <Button Text="Increment" OnClick="IncrementStyled" />
    </ContentTemplate>
</UpdatePanel>

---

6. UpdatePanel with UpdateMode Properties

The component also supports UpdateMode and ChildrenAsTriggers properties for migration compatibility. In Web Forms these controlled when the panel refreshed. In Blazor, these properties have no behavioral effect since rendering is always differential.

<UpdatePanel UpdateMode="UpdatePanelUpdateMode.Conditional" 
             ChildrenAsTriggers="false">
    <ContentTemplate>
        <p>Content with UpdateMode properties</p>
    </ContentTemplate>
</UpdatePanel>

---

Migration Guide: Web Forms to Blazor

Web Forms (Before)

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <p>Click count: <asp:Label ID="lblCount" runat="server" Text="0" /></p>
        <asp:Button ID="btnIncrement" runat="server" Text="Increment" OnClick="btnIncrement_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

Blazor with BWFC (After)

<UpdatePanel UpdateMode="UpdatePanelUpdateMode.Always">
    <ContentTemplate>
        <p>Click count: <Label Text="@count.ToString()" /></p>
        <Button Text="Increment" OnClick="HandleIncrement" />
    </ContentTemplate>
</UpdatePanel>

@code {
    private int count = 0;
    
    private void HandleIncrement()
    {
        count++;
    }
}

Migration Steps

1. Remove asp: prefix and runat="server"
2. Remove ID attributes (unless needed for DefaultButton or similar references)
3. Convert event handlers: OnClick="btnIncrement_Click" becomes OnClick="HandleIncrement"
4. Replace server-side controls with Blazor components or direct binding (@count)
5. Move code-behind logic to @code block
6. Both ContentTemplate and ChildContent syntaxes work — choose based on preference