MaskedEditExtender Control,MaskType,Mask Characters and Delimiters,MaskedEditExtender Control Property,How To Use MaskedEditExtender Control

Right Place For Right Person ^TM

R4R

AJAX with C#

AJAX Tutorials

MaskedEditExtender Control

MaskedEditExtender Control

MaskedEdit is an ASP.NET AJAX extender control that attaches to a TextBox control to prevent the kind of text that can be entered.When we use MaskedEdit ,the input is masked and the value is validated on the client according to the MaskType selection.. The MaskedEdit control integrated with the MaskedEditValidator for verify the input

MaskType - Type of validation to perform:
None - No validation
Number - Number validation
Date - Date validation
Time - Time validation
DateTime - Date and time validation

Mask Characters and Delimiters
9 - Only a numeric character
L - Only a letter
$ - Only a letter or a space
C - Only a custom character (case sensitive)
A - Only a letter or a custom character
N - Only a numeric or custom character
? - Any character

/ - Date separator
: - Time separator
. - Decimal separator
, - Thousand separator
\ - Escape character
{ - Initial delimiter for repetition of masks
} - Final delimiter for repetition of masks

MaskedEditExtender Control Property
AutoCompleteValue -when Auto complete is true when defult character is used.
Century - when a date mask only has two digits for the year than used Default century
ClearMaskOnLostFocus - If it is True then remove the mask when the TextBox loses focus
ClearTextOnInvalid -If condition is true then clear the textbox when entered invalid text.
ClipboardEnabled - True to allow copy/paste with the clipboard
ClipboardText - when a clipboard paste is performed,then Prompt text to use .
DisplayMoney - Specifies how the currency symbol is displaye

How To Use MaskedEditExtender Control
Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008

Step 2. Now go to File Menu -> New -> Web Site

Step 3.

Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #)

Choose Visual C#
Step 4. Click on the OK Button.
Step 5. Now drag some controls under the AJAX Extensions.
First control you are going to drag and drop on the page is - Script Manager.
After that .


<%@ Page Language="C#" AutoEventWireup="true"  Codevirtual="Default.aspx.cs" 
Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body bgcolor="#66ff66">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
       
        <asp:Label ID="Label1" runat="server" Text="Name" Font-Bold="True"></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" BackColor="#CCCCFF"></asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" Font-Bold="True" Text="MobileNumber">
</asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" BackColor="#FFFFCC"></asp:TextBox>
        <cc1:MaskedEditExtender ID="MaskedEditExtender1"     runat="server" 
TargetControlID="TextBox2"

            MaskType="Number" Mask="9999999999" MessageValidatorTip="true" 
AcceptNegative="None"

                                InputDirection="RightToLeft" 
            ErrorTooltipEnabled="true">
        </cc1:MaskedEditExtender>
        <cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server"  
            ControlToValidate="TextBox2" ControlExtender="MaskedEditExtender1"

             MinimumValue="1000000000" 
            MinimumValueMessage="Please enter correc mobile number" 
MaximumValueMessage="Invalid 
mobile  number! The highest roll

             number is 105" Display="Dynamic" IsValidEmpty="false"

             InvalidValueMessage="The mobile number does not exist" 
            EmptyValueMessage="Mobile  number is not entered"></cc1:MaskedEditValidator>
    </div>
    </form>
</body>
</html>