MaskedEditExtender Component

The MaskedEditExtender applies an input mask to a target textbox, restricting input to a specific pattern. Mask characters: 9=digit, L=letter, $=digit or space, C=any character, A=letter or digit. This emulates the Ajax Control Toolkit MaskedEditExtender.

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. Phone Number Mask

A US phone number mask using 999-999-9999 pattern. Only digits are accepted in each position.

<input type="text" id="txtPhone" />
<MaskedEditExtender TargetControlID="txtPhone"
                    Mask="999-999-9999"
                    MaskType="MaskType.None"
                    PromptCharacter="_"
                    ClearMaskOnLostFocus="true" />

2. Social Security Number Mask

An SSN mask using 999-99-9999 pattern.

<MaskedEditExtender TargetControlID="txtSSN"
                    Mask="999-99-9999"
                    MaskType="MaskType.None"
                    PromptCharacter="_" />

3. Date Mask

A date mask with MaskType="MaskType.Date" for date-specific validation.

<MaskedEditExtender TargetControlID="txtDate"
                    Mask="99/99/9999"
                    MaskType="MaskType.Date"
                    ClearTextOnInvalid="true" />

4. Zip Code Mask

US Zip+4 code mask using 99999-9999 pattern.

<MaskedEditExtender TargetControlID="txtZip"
                    Mask="99999-9999"
                    PromptCharacter="_" />

5. Custom Alphanumeric Mask

A product code mask mixing letters and digits: AA-9999-LL (A=alphanumeric, L=letter).

<MaskedEditExtender TargetControlID="txtProduct"
                    Mask="AA-9999-LL"
                    MaskType="MaskType.None"
                    ClearMaskOnLostFocus="false" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtPhone" runat="server" />
<ajaxToolkit:MaskedEditExtender ID="MaskedEdit1" 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" />

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <asp:TextBox> with <input type="text">
  3. Replace <ajaxToolkit:MaskedEditExtender> with <MaskedEditExtender>
  4. Keep Mask, PromptCharacter, ClearMaskOnLostFocus properties unchanged
  5. Prefix enum values with type name: MaskType="MaskType.None"
  6. Ensure the page uses @rendermode InteractiveServer