Creating a Masked Input

Creating a Masked Input

To create a masked input in an ASP.NET web application using the AJAX Control Toolkit, you can use the MaskedEditExtender control. This control extends the functionality of a standard ASP.NET TextBox control to provide masked input capabilities.

Here are the steps to create a masked input using the MaskedEditExtender control:

Install the AJAX Control Toolkit into your ASP.NET web application. You can download the latest version of the toolkit from the official website: https://ajaxcontroltoolkit.devexpress.com/.

Add a reference to the AJAX Control Toolkit in your ASP.NET web page. You can do this by adding a ScriptManager control to your page and setting the ToolkitScriptManager control property to “true”. This will enable you to use the MaskedEditExtender control in your web page.

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”asp” %>

<asp:ToolkitScriptManager runat=”server” EnableScriptGlobalization=”true” EnableScriptLocalization=”true”>

</asp:ToolkitScriptManager>

Add a TextBox control to your ASP.NET web page. This will be the control that the user will enter data into.

<asp:TextBox ID=”txtPhoneNumber” runat=”server”></asp:TextBox>

Add a MaskedEditExtender control to your ASP.NET web page. This control will extend the functionality of the TextBox control to provide masked input capabilities. Set the TargetControlID property to the ID of the TextBox control that you added in step 3.

<asp:MaskedEditExtender ID=”MaskedEditExtender1″ runat=”server” TargetControlID=”txtPhoneNumber”

   Mask=”(999) 999-9999″ MessageValidatorTip=”true” MaskType=”Number” InputDirection=”LeftToRight”

   AcceptNegative=”None” ErrorTooltipEnabled=”True” />

Set the Mask property of the MaskedEditExtender control to specify the input mask. In this example, we’re using a mask for a US phone number.

Set any other properties of the MaskedEditExtender control as needed. For example, you can set the PromptCharacter property to specify the character that will be displayed in the TextBox control as a placeholder for the user’s input. Save the ASP.NET web page and run it in a web browser. The TextBox control will now display the specified mask and will only accept input that conforms to the mask.

Apply for ASP.NET Certification Now!!

https://www.vskills.in/certification/certified-aspnet-programmer

Back to Tutorial