PopupControlExtender Component

The PopupControlExtender displays a popup panel when the user clicks a target control. The popup can be positioned relative to the trigger and can commit a value back to the target. This emulates the Ajax Control Toolkit PopupControlExtender.

Note: Extender components render no HTML themselves — they attach JavaScript behavior to an existing target element identified by TargetControlID. This page requires InteractiveServer render mode for JS interop.

1. Basic Popup

Click the textbox to show a popup panel with selectable options.

<input type="text" id="txtPopupBasic" readonly />
<div id="pnlColorPicker" style="display:none;">
    <!-- Popup content -->
</div>
<PopupControlExtender TargetControlID="txtPopupBasic"
                      PopupControlID="pnlColorPicker"
                      Position="PopupPosition.Bottom" />

2. Positioned Popup

Use Position, OffsetX, and OffsetY to control popup placement.

<PopupControlExtender TargetControlID="btnPopupRight"
                      PopupControlID="pnlRight"
                      Position="PopupPosition.Right" OffsetX="10" />

<PopupControlExtender TargetControlID="btnPopupTop"
                      PopupControlID="pnlTop"
                      Position="PopupPosition.Top" OffsetY="-5" />

3. Commit Value

Use CommitProperty to specify which property of the target control receives the committed value when the popup closes.

<input type="text" id="txtCommit" readonly />
<div id="pnlCommit" style="display:none;">
    <button>Small</button>
    <button>Medium</button>
</div>
<PopupControlExtender TargetControlID="txtCommit"
                      PopupControlID="pnlCommit"
                      Position="PopupPosition.Bottom"
                      CommitProperty="value" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtColor" runat="server" />
<asp:Panel ID="pnlPopup" runat="server" Style="display:none;">
    <!-- Popup content -->
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="PopupControl1" runat="server"
    TargetControlID="txtColor"
    PopupControlID="pnlPopup"
    Position="Bottom"
    CommitProperty="value" />

Blazor with BWFC (After)

<input type="text" id="txtColor" />
<div id="pnlPopup" style="display:none;">
    <!-- Popup content -->
</div>
<PopupControlExtender TargetControlID="txtColor"
                      PopupControlID="pnlPopup"
                      Position="PopupPosition.Bottom"
                      CommitProperty="value" />

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <asp:TextBox> with <input type="text">
  3. Replace <asp:Panel> with <div> keeping the same id
  4. Replace <ajaxToolkit:PopupControlExtender> with <PopupControlExtender>
  5. Prefix enum values: Position="PopupPosition.Bottom"
  6. Ensure the page uses @rendermode InteractiveServer