ToggleButtonExtender Component

The ToggleButtonExtender replaces a standard checkbox with clickable toggle images. Different images are shown for checked, unchecked, hover, and disabled states. This emulates the Ajax Control Toolkit ToggleButtonExtender.

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 Toggle

A checkbox with custom checked/unchecked images and alt text.

<input type="checkbox" id="chkBasicToggle" />
<ToggleButtonExtender TargetControlID="chkBasicToggle"
                      CheckedImageUrl="/images/toggle-on.png"
                      UncheckedImageUrl="/images/toggle-off.png"
                      CheckedImageAlternateText="Subscribed"
                      UncheckedImageAlternateText="Not subscribed"
                      ImageWidth="48" ImageHeight="24" />

2. Custom Image Paths

Different toggle images for different use cases — a star rating toggle and a heart favorite toggle.

<input type="checkbox" id="chkStar" />
<ToggleButtonExtender TargetControlID="chkStar"
                      CheckedImageUrl="/images/star-filled.png"
                      UncheckedImageUrl="/images/star-empty.png"
                      ImageWidth="32" ImageHeight="32" />

3. Hover Images

Use CheckedImageOverUrl and UncheckedImageOverUrl to provide hover-state images for better interactivity.

<ToggleButtonExtender TargetControlID="chkHover"
                      CheckedImageUrl="/images/bell-on.png"
                      UncheckedImageUrl="/images/bell-off.png"
                      CheckedImageOverUrl="/images/bell-on-hover.png"
                      UncheckedImageOverUrl="/images/bell-off-hover.png"
                      ImageWidth="32" ImageHeight="32" />

4. Disabled State

Use DisabledCheckedImageUrl and DisabledUncheckedImageUrl to show grayed-out images when the checkbox is disabled.

<input type="checkbox" id="chkDisabled" disabled checked />
<ToggleButtonExtender TargetControlID="chkDisabled"
                      CheckedImageUrl="/images/lock-closed.png"
                      UncheckedImageUrl="/images/lock-open.png"
                      DisabledCheckedImageUrl="/images/lock-closed-disabled.png"
                      DisabledUncheckedImageUrl="/images/lock-open-disabled.png"
                      ImageWidth="32" ImageHeight="32" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:CheckBox ID="chkToggle" runat="server" Text="Subscribe" />
<ajaxToolkit:ToggleButtonExtender ID="ToggleButton1" runat="server"
    TargetControlID="chkToggle"
    CheckedImageUrl="~/images/toggle-on.png"
    UncheckedImageUrl="~/images/toggle-off.png"
    ImageWidth="48" ImageHeight="24" />

Blazor with BWFC (After)

<input type="checkbox" id="chkToggle" />
<ToggleButtonExtender TargetControlID="chkToggle"
                      CheckedImageUrl="/images/toggle-on.png"
                      UncheckedImageUrl="/images/toggle-off.png"
                      ImageWidth="48" ImageHeight="24" />

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <asp:CheckBox> with <input type="checkbox">
  3. Replace <ajaxToolkit:ToggleButtonExtender> with <ToggleButtonExtender>
  4. Update image URLs from ~/images/ to /images/ (Blazor static file path)
  5. Keep all image properties unchanged
  6. Ensure the page uses @rendermode InteractiveServer