NumericUpDownExtender Component

The NumericUpDownExtender adds spinner (up/down) buttons to a target textbox for numeric value adjustment. This emulates the Ajax Control Toolkit NumericUpDownExtender.

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 Spinner

A simple numeric spinner with default step of 1.

<input type="text" id="txtBasicNum" value="1" />
<NumericUpDownExtender TargetControlID="txtBasicNum" Width="150" Step="1" />

2. Min/Max Constraints

Use Minimum and Maximum to constrain the allowed range. The spinner stops at the boundaries.

Range: 1 to 10
<NumericUpDownExtender TargetControlID="txtBounded"
                       Minimum="1" Maximum="10" Step="1" />

3. Custom Step Values

Set Step to increment/decrement by different amounts.

<NumericUpDownExtender TargetControlID="txtStep5" Step="5" />
<NumericUpDownExtender TargetControlID="txtStepDecimal" Step="0.25" />
<NumericUpDownExtender TargetControlID="txtStep100" Step="100" />

4. RefValues — Cycling Through Named Values

Use RefValues with semicolon-separated values to cycle through a list of named items instead of numbers.

Use the spinner to cycle through month names.
<input type="text" id="txtMonths" value="January" />
<NumericUpDownExtender TargetControlID="txtMonths"
    RefValues="January;February;March;April;May;June;July;August;September;October;November;December" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtQuantity" runat="server" Text="1" />
<ajaxToolkit:NumericUpDownExtender ID="NumericUpDown1" runat="server"
    TargetControlID="txtQuantity"
    Width="150" Minimum="1" Maximum="100" Step="1" />

Blazor with BWFC (After)

<input type="text" id="txtQuantity" value="1" />
<NumericUpDownExtender TargetControlID="txtQuantity"
                       Width="150" Minimum="1" Maximum="100" Step="1" />

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <asp:TextBox> with <input type="text">
  3. Replace <ajaxToolkit:NumericUpDownExtender> with <NumericUpDownExtender>
  4. Keep all property names: Minimum, Maximum, Step, RefValues, Width
  5. Ensure the page uses @rendermode InteractiveServer