ConfirmButtonExtender Component

The ConfirmButtonExtender attaches a browser confirmation dialog to a target button. When the user clicks the button, a confirm() prompt appears. If the user cancels, the click event is suppressed. This emulates the Ajax Control Toolkit ConfirmButtonExtender.

1. Basic Confirm on Delete

A delete button that asks for confirmation before proceeding.

<!-- Web Forms (Before) -->
<asp:Button ID="btnDelete" runat="server" Text="Delete Item" OnClick="btnDelete_Click" />
<ajaxToolkit:ConfirmButtonExtender ID="cbe1" runat="server"
    TargetControlID="btnDelete"
    ConfirmText="Are you sure you want to delete this item?" />

<!-- Blazor with BWFC (After) -->
<button id="btnDelete" @onclick="HandleDelete">Delete Item</button>
<ConfirmButtonExtender TargetControlID="btnDelete"
                       ConfirmText="Are you sure you want to delete this item?" />

2. Confirm with Custom Messages

Different buttons with different confirmation prompts for various actions.

<button id="btnSubmitOrder" @onclick="HandleSubmitOrder">Submit Order</button>
<ConfirmButtonExtender TargetControlID="btnSubmitOrder"
                       ConfirmText="Submit this order? This action cannot be undone." />

<button id="btnResetForm" @onclick="HandleResetForm">Reset Form</button>
<ConfirmButtonExtender TargetControlID="btnResetForm"
                       ConfirmText="Reset all form fields to their default values?" />

3. Confirm with Default Text

When no ConfirmText is specified, the default message "Are you sure?" is shown.

<!-- Uses default ConfirmText: "Are you sure?" -->
<button id="btnDefault" @onclick="HandleDefaultConfirm">Click Me</button>
<ConfirmButtonExtender TargetControlID="btnDefault" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Button ID="btnDelete" runat="server" Text="Delete"
    OnClick="btnDelete_Click" CssClass="btn btn-danger" />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
    TargetControlID="btnDelete"
    ConfirmText="Are you sure you want to delete this item?" />

Blazor with BWFC (After)

<button id="btnDelete" class="btn btn-danger" @onclick="HandleDelete">Delete</button>
<ConfirmButtonExtender TargetControlID="btnDelete"
                       ConfirmText="Are you sure you want to delete this item?" />

@code {
    private void HandleDelete()
    {
        // Action proceeds only if user confirmed
    }
}

Migration Steps

1. Remove asp:ScriptManager (not needed in Blazor)
2. Replace <asp:Button> with a standard <button> or BWFC <Button>
3. Replace <ajaxToolkit:ConfirmButtonExtender> with <ConfirmButtonExtender>
4. Keep the same TargetControlID — ensure the target element has a matching id
5. Keep the same ConfirmText value
6. Ensure the page uses @rendermode InteractiveServer (JS interop required)