Ajax Toolkit Migration Showcase

This page demonstrates a comprehensive before/after migration scenario from the ASP.NET AJAX Control Toolkit to Blazor using BlazorWebFormsComponents (BWFC). Each section shows a working Blazor component alongside its original Web Forms equivalent.

Migration in action: Every control below was converted by removing asp: and ajaxToolkit: prefixes, replacing server controls with HTML elements, and using the same property names. No JavaScript rewrites were needed.

1. Navigation with Accordion

A sidebar-style accordion menu with multiple panes. Only one pane is expanded at a time.

📁 Getting Started

📦 Components

🔧 Configuration

Selected pane: 0

Migration Notes

<!-- Web Forms (Before) -->
<ajaxToolkit:Accordion ID="AccordionNav" runat="server" SelectedIndex="0"
    HeaderCssClass="accHeader" ContentCssClass="accContent">
    <Panes>
        <ajaxToolkit:AccordionPane>
            <Header>Getting Started</Header>
            <Content>...links...</Content>
        </ajaxToolkit:AccordionPane>
    </Panes>
</ajaxToolkit:Accordion>

<!-- Blazor with BWFC (After) -->
<Accordion SelectedIndex="0" HeaderCssClass="accHeader" ContentCssClass="accContent">
    <AccordionPane>
        <Header>Getting Started</Header>
        <Content>...links...</Content>
    </AccordionPane>
</Accordion>

2. Tabbed Form

A TabContainer with form fields in each tab — personal info, address, and preferences.

👤 Personal Info📍 Address⚙️ Preferences

First Name

Last Name

Street Address

City

State

Zip Code

Notification Frequency

Theme

Migration Notes

<!-- Web Forms (Before) -->
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
    <ajaxToolkit:TabPanel HeaderText="Personal Info" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtFirstName" runat="server" />
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

<!-- Blazor with BWFC (After) -->
<TabContainer ActiveTabIndex="0">
    <TabPanel HeaderText="Personal Info">
        <ContentTemplate>
            <input type="text" @bind="firstName" />
        </ContentTemplate>
    </TabPanel>
</TabContainer>

3. Modal Dialog

A ModalPopupExtender for confirmation dialogs — triggered by a button, dismissed with OK/Cancel.

Migration Notes

<!-- Web Forms (Before) -->
<asp:Button ID="btnDelete" runat="server" Text="Delete Account" />
<asp:Panel ID="pnlConfirm" runat="server" style="display:none">
    <asp:Button ID="btnOk" runat="server" Text="Yes" />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe1" runat="server"
    TargetControlID="btnDelete" PopupControlID="pnlConfirm"
    OkControlID="btnOk" CancelControlID="btnCancel"
    BackgroundCssClass="modal-bg" DropShadow="true" />

<!-- Blazor with BWFC (After) -->
<button id="btnDelete">Delete Account</button>
<div id="pnlConfirm" style="display:none">
    <button id="btnOk">Yes</button>
    <button id="btnCancel">Cancel</button>
</div>
<ModalPopupExtender TargetControlID="btnDelete" PopupControlID="pnlConfirm"
    OkControlID="btnOk" CancelControlID="btnCancel"
    BackgroundCssClass="modal-bg" DropShadow="true" />

4. Autocomplete Search

An AutoCompleteExtender on a search box. Type at least 2 characters to see suggestions from a mock product list.

🔍

Try typing: "Wid", "Pro", "Gad"

Migration Notes

<!-- Web Forms (Before) -->
<asp:TextBox ID="txtSearch" runat="server" />
<ajaxToolkit:AutoCompleteExtender ID="ace1" runat="server"
    TargetControlID="txtSearch"
    ServicePath="ProductSearch.asmx" ServiceMethod="GetProducts"
    MinimumPrefixLength="2" CompletionSetCount="8" />

<!-- Blazor with BWFC (After) -->
<input type="text" id="txtSearch" />
<AutoCompleteExtender TargetControlID="txtSearch"
    MinimumPrefixLength="2" CompletionSetCount="8"
    FirstRowSelected="true" />

5. Date Picker

A CalendarExtender attached to a date field with format constraints.

Birth Date Range: 1920–today

Event Date

Migration Notes

<!-- Web Forms (Before) -->
<asp:TextBox ID="txtDate" runat="server" />
<ajaxToolkit:CalendarExtender ID="cal1" runat="server"
    TargetControlID="txtDate" Format="MM/dd/yyyy" PopupPosition="BottomLeft" />

<!-- Blazor with BWFC (After) -->
<input type="text" id="txtDate" />
<CalendarExtender TargetControlID="txtDate"
    Format="MM/dd/yyyy" PopupPosition="CalendarPosition.BottomLeft" />

6. Masked Input

A MaskedEditExtender for phone number entry — only digits allowed in each position.

Phone Number Mask: 999-999-9999 — digits only

Migration Notes

<!-- Web Forms (Before) -->
<asp:TextBox ID="txtPhone" runat="server" />
<ajaxToolkit:MaskedEditExtender ID="mee1" runat="server"
    TargetControlID="txtPhone" Mask="999-999-9999"
    MaskType="None" PromptCharacter="_" ClearMaskOnLostFocus="true" />

<!-- Blazor with BWFC (After) -->
<input type="text" id="txtPhone" />
<MaskedEditExtender TargetControlID="txtPhone"
    Mask="999-999-9999" MaskType="MaskType.None"
    PromptCharacter="_" ClearMaskOnLostFocus="true" />

7. Numeric Spinner

A NumericUpDownExtender for quantity selection with min/max constraints.

Quantity (1–50)

Price Increment ($0.25 steps)

Migration Notes

<!-- Web Forms (Before) -->
<asp:TextBox ID="txtQty" runat="server" Text="1" />
<ajaxToolkit:NumericUpDownExtender ID="nud1" runat="server"
    TargetControlID="txtQty" Minimum="1" Maximum="50" Step="1" Width="150" />

<!-- Blazor with BWFC (After) -->
<input type="text" id="txtQty" value="1" />
<NumericUpDownExtender TargetControlID="txtQty"
    Minimum="1" Maximum="50" Step="1" Width="150" />

8. Collapsible Sections

A CollapsiblePanelExtender for show/hide content areas with dynamic label text.

Click to hide FAQ ▲

Frequently Asked Questions

Q: Can I migrate incrementally?: A: Yes! BWFC components work alongside native Blazor markup.
Q: Do I need to rewrite my CSS?: A: No — the rendered HTML matches what Web Forms produced.

Advanced Configuration

These settings are hidden by default (Collapsed="true") and revealed on demand.

Enable debug logging
Custom serialization options
Performance profiling hooks

Migration Notes

<!-- Web Forms (Before) -->
<asp:LinkButton ID="lnkToggle" runat="server" Text="Toggle" />
<asp:Label ID="lblStatus" runat="server" />
<asp:Panel ID="pnlContent" runat="server">Content</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="server"
    TargetControlID="pnlContent" CollapseControlID="lnkToggle"
    ExpandControlID="lnkToggle" Collapsed="true"
    CollapsedText="Show" ExpandedText="Hide" TextLabelID="lblStatus" />

<!-- Blazor with BWFC (After) -->
<button id="btnToggle">Toggle</button>
<span id="lblStatus"></span>
<div id="pnlContent">Content</div>
<CollapsiblePanelExtender TargetControlID="pnlContent"
    CollapseControlID="btnToggle" ExpandControlID="btnToggle"
    Collapsed="true" CollapsedText="Show" ExpandedText="Hide"
    TextLabelID="lblStatus" />

9. Slider Control

A SliderExtender for range selection with a bound label display.

Monthly Budget

500

Satisfaction (1–5)

Migration Notes

<!-- Web Forms (Before) -->
<asp:TextBox ID="txtSlider" runat="server" />
<asp:Label ID="lblValue" runat="server" />
<ajaxToolkit:SliderExtender ID="se1" runat="server"
    TargetControlID="txtSlider" Minimum="0" Maximum="2000"
    BoundControlID="lblValue" Orientation="Horizontal" />

<!-- Blazor with BWFC (After) -->
<input type="text" id="txtSlider" />
<span id="lblValue"></span>
<SliderExtender TargetControlID="txtSlider"
    Minimum="0" Maximum="2000" BoundControlID="lblValue"
    TooltipText="${0}" />

10. Hover Tooltip

A HoverMenuExtender showing extra info cards on hover.

Widget Pro
Hover for details

Gadget Max
Hover for details

Migration Notes

<!-- Web Forms (Before) -->
<asp:Panel ID="pnlTarget" runat="server">Widget Pro</asp:Panel>
<asp:Panel ID="pnlMenu" runat="server" Style="display:none">Details...</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hme1" runat="server"
    TargetControlID="pnlTarget" PopupControlID="pnlMenu"
    PopupPosition="Right" PopDelay="200" HoverCssClass="highlight" />

<!-- Blazor with BWFC (After) -->
<div id="pnlTarget">Widget Pro</div>
<div id="pnlMenu" style="display:none">Details...</div>
<HoverMenuExtender TargetControlID="pnlTarget"
    PopupControlID="pnlMenu" PopupPosition="PopupPosition.Right"
    PopDelay="200" HoverCssClass="highlight" />

Migration Summary

Web Forms Control	Blazor Component	Key Changes
`ajaxToolkit:Accordion`	`Accordion`	Remove `<Panes>` wrapper
`ajaxToolkit:TabContainer`	`TabContainer`	Direct child `TabPanel` elements
`ajaxToolkit:ModalPopupExtender`	`ModalPopupExtender`	Replace `asp:Panel` → `div`
`ajaxToolkit:AutoCompleteExtender`	`AutoCompleteExtender`	Replace web service with server-side data
`ajaxToolkit:CalendarExtender`	`CalendarExtender`	Prefix enums: `CalendarPosition.X`
`ajaxToolkit:MaskedEditExtender`	`MaskedEditExtender`	Prefix enums: `MaskType.X`
`ajaxToolkit:NumericUpDownExtender`	`NumericUpDownExtender`	Same property names
`ajaxToolkit:CollapsiblePanelExtender`	`CollapsiblePanelExtender`	Prefix enums: `ExpandDirection.X`
`ajaxToolkit:SliderExtender`	`SliderExtender`	Prefix enums: `SliderOrientation.X`
`ajaxToolkit:HoverMenuExtender`	`HoverMenuExtender`	Prefix enums: `PopupPosition.X`

Common pattern for all controls:

Remove asp:ScriptManager
Replace <asp:TextBox>/<asp:Panel>/<asp:Button> with standard HTML
Replace <ajaxToolkit:XYZ> with <XYZ>
Prefix enum values with their type name (e.g., PopupPosition.Right)
Ensure @rendermode InteractiveServer for extender components