Home > DeveloperSection > Articles > Ajax Toolkit MaskedEditExtender Control in ASP.Net

Ajax Toolkit MaskedEditExtender Control in ASP.Net

Posted by  Chris S
on    December-07-2010 14:22 PM

AJAX AJAX 
Ratings:
0 Comment(s)
 7761  View(s)
Rate this:

Ajax Toolkit MaskedEditExtender Control in ASP.Net

MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to restrict the kind of text that can be entered. The supported data formats are: Number, Date, Time, and DateTime. MaskedEdit uses the culture settings specified in the CultureName property.

MaskedEdit Properties:

·         MaskType - Type of validation to perform:

1.       None - No validation

2.       Number - Number validation

3.       Date - Date validation

4.       Time - Time validation

5.       DateTime - Date and time validation

·         AcceptAMPM - True to display an AM/PM symbol

·         AcceptNegative - True if the negative sign (-) is allowed

·         AutoComplete - True to automatically fill in empty mask characters not specified by the user

1.       MaskType=Number - Empty mask characters will be filled with zeros

2.       MaskType=Time - Empty mask characters will be filled with the current time

3.       MaskType=Date - Empty mask characters will be filled with the current date

4.       MaskType=DateTime - Empty mask characters will be filled with the current date/time

·         ErrorTooltipEnabled - True to show a tooltip message when the mouse hovers over an invalid TextBox

·         Filtered - Valid characters for mask type "C" (case-sensitive)

·         InputDirection - Text input direction

1.       LeftToRight - Left to Right

2.       RightToLeft - Right to left

·         MessageValidatorTip - Message displayed when editing in TextBox

MaskedEdit Validator:

MaskedEditValidator is a custom validator which attaches to the MaskedEdit extender and its associated TextBox and verifies that the input text matches the pattern specified in the MaskedEdit extender. Once associated with a validation group, server- and client-side validation can be performed and used to display messages.

MaskedEditValidator Properties:

·         ControlToValidate - ID of the TextBox to validate

·         ControlExtender - ID of the MaskedEditExtender attached to the TextBox

·         AcceptAMPM - Whether or not AM/PM is accepted on times.

·         ClientValidationFunction - Client script used for custom validation

·         IsValidEmpty - True if the TextBox can be empty

·         ValidationExpression - Regular expression used to validate the input

·         TooltipMessage - Message displayed when the TextBox has focus with an empty value

·         EmptyValueMessage - Message displayed when empty and TextBox has focus

·         EmptyValueBlurredText - Message displayed when empty and TextBox does not have focus

·         InvalidValueMessage - Message displayed when invalid and TextBox has focus

·         InvalidValueBlurredMessage - Message displayed when invalid and TextBox does not have focus

·         MaximumValueMessage - Message displayed when maximum value exceeded and TextBox has focus

·         MaximumValueBlurredMessage - Message displayed when maximum value exceeded and TextBox does not have focus

·         MinimumValueMessage - Message displayed when minimum value exceeded and TextBox has focus

·         MinimumValueBlurredText - Message displayed when minimum value exceeded and TextBox does not have focus

Code:

<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<%--Use MaskedEditExtender and MaskedEditValidator--%>

 

<cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox1" MaskType="Date" Mask="99/99/9999">

</cc1:MaskedEditExtender>

 

<cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="MaskedEditExtender1" TooltipMessage="Input a Date"

ControlToValidate="TextBox1" EmptyValueMessage="Date is required" InvalidValueMessage="Date is invalid" IsValidEmpty="False" >

</cc1:MaskedEditValidator>

 

<asp:Label ID="Label1" runat="server" Text="Enter D.O.B"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br /><br />

<asp:Button ID="Button1"runat="server" Text="Submit"onclick="Button1_Click"/>

<br />

<asp:Label ID="Label2" runat="server"></asp:Label>

Here Mask="99/99/9999" specify the input farmat

Run the project

AjaxControl Toolkit MaskedEditExtender Control in ASP.Net

When you click the Textbox then message will show input a date

AjaxControl Toolkit MaskedEditExtender Control in ASP.Net

AjaxControl Toolkit MaskedEditExtender Control in ASP.Net

When you fill only first field and click Submit button then remaining field will be taken from the current date.

AjaxControl Toolkit MaskedEditExtender Control in ASP.Net

 

When you enter invalid date then error message will show.

AjaxControl Toolkit MaskedEditExtender Control in ASP.Net

When you enter valid date and click Submit button then date will be show in the Label

AjaxControl Toolkit MaskedEditExtender Control in ASP.Net
















Recent Activities

jayprakash sharma Created New Discussion what is short circuit operator in java   8 hours ago

Sumit Kesarwani added new Question What is the Vector class in java?   2 days ago

Anchal Kesharwani added new Blog JSON Syntax   9 days ago

Anchal Kesharwani added new Article How to Send Mail in Node.JS   9 days ago

Top Contributors

Don't want to miss updates? Please click the below button!