MaskedEditExtender is part of rich AJAXControlToolKit. It is used to restrict the user to enter values in a specific format. There are five mask types available in MaskedEditExtender to limit user to specific format. It includes Time, Date, Number, DateTime and None. You can provide MaskType as “None” and can provide your own format. Mask property is used to set the format for all these mask types.
MaskedEditValidator in used with MaskedEditExtender to validate the input format provided in Mask property of MaskedEditExtender for the input field attached to MaskedEditvalidator and MaskedEditExtender. Maximum and minimum values can be set using MaximumValue and MinimumValue properties.
1.Open Visual Studio 2010
2.File > New > Website
3.Visual basic or Visual C# > ASP.NET Empty Web Site
4.Website > Add New Item > Web Form
5.Open Toolbox > Right Click > Add Tab
6.Name the Tab As “AJAX Control Toolkit”
7.Click on Tab > Choose Items
8.Browse the “AjaxControlToolkit.dll” > Click Ok
9.I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
10.Open web form and add a ScriptManager control from “AJAX Extensions” tab.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
11.Add four TextBox controls and add four MaskedEditExtender and four MaskedEditValidator from “AjaxControlToolkit” in your web form. Here is code for entire aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Please Enter Number:
<asp:TextBox ID="txtBoxNumber" runat="server"></asp:TextBox>
<ajax:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="txtBoxNumber"
Mask="9,999,999" MaskType="Number" MessageValidatorTip="true" InputDirection="RightToLeft" AcceptNegative="Left" >
</ajax:MaskedEditExtender>
<ajax:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="MaskedEditExtender1"
ControlToValidate="txtBoxNumber" IsValidEmpty="false" MaximumValue="10000000" MinimumValue="-1000"
EmptyValueMessage="Please enter number"
MaximumValueMessage="Please Enter number less than 10000000" MinimumValueMessage="Please enter number greater than -1000" >
</ajax:MaskedEditValidator>
<br />
Please Enter Date:
<asp:TextBox ID="txtBoxDate" runat="server"></asp:TextBox>
<ajax:MaskedEditExtender ID="MaskedEditExtender2" runat="server" TargetControlID="txtBoxDate"
Mask="99/99/9999" MaskType="Date" MessageValidatorTip="true" InputDirection="RightToLeft" >
</ajax:MaskedEditExtender>
<ajax:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ControlExtender="MaskedEditExtender2"
ControlToValidate="txtBoxDate" IsValidEmpty="false" MaximumValue="31/12/2099" MinimumValue="01/01/1900"
EmptyValueMessage="Please enter date"
MaximumValueMessage="Please enter date less than 31/12/2099" MinimumValueMessage="Please enter date greater than 01/01/1900" >
</ajax:MaskedEditValidator>
<br />
Please Enter Time:
<asp:TextBox ID="txtBoxTime" runat="server"></asp:TextBox>
<ajax:MaskedEditExtender ID="MaskedEditExtender3" runat="server" TargetControlID="txtBoxTime"
Mask="99:99:99" MaskType="Time" MessageValidatorTip="true" InputDirection="RightToLeft" >
</ajax:MaskedEditExtender>
<ajax:MaskedEditValidator ID="MaskedEditValidator3" runat="server" ControlExtender="MaskedEditExtender3"
ControlToValidate="txtBoxTime" IsValidEmpty="false" MaximumValue="23:59:59" MinimumValue="00:00:00"
EmptyValueMessage="Please enter time"
MaximumValueMessage="Please enter time less than 23:59:59" MinimumValueMessage="Please enter time greater than 00:00:00" >
</ajax:MaskedEditValidator>
<br />
Please Enter Date and Time:
<asp:TextBox ID="txtBoxDateTime" runat="server"></asp:TextBox>
<ajax:MaskedEditExtender ID="MaskedEditExtender4" runat="server" TargetControlID="txtBoxDateTime"
Mask="99/99/9999 99:99:99" MaskType="DateTime" MessageValidatorTip="true" InputDirection="RightToLeft" >
</ajax:MaskedEditExtender>
<ajax:MaskedEditValidator ID="MaskedEditValidator4" runat="server" ControlExtender="MaskedEditExtender4"
ControlToValidate="txtBoxDateTime" IsValidEmpty="false" MaximumValue="31/12/2099 23:59:59" MinimumValue="01/01/1900 00:00:00"
EmptyValueMessage="Please enter date and time"
MaximumValueMessage="Please enter time less than 31/12/2099 23:59:59" MinimumValueMessage="Please enter time greater than 01/01/1900 00:00:00" >
</ajax:MaskedEditValidator>
</div>
</form>
</body>
</html>
I have shown use of AjaxControlToolkit MaskedEditExtender and MaskedEditValidator here for Number, Date, Time and DateTime. You can see the “Register” directive at the top and TagPrefix is also mentioned in the “Register” directive. “Mask” property is used for format of the input values and “MaskType” property is also mentioned for every type. You can see I have also used MaximumValueMessage and MinimumValueMessage along with MaximumValue and MinimumValue properties. You must have to provide TargerControlID property in MaskEditExtender for TextBox and ControlExtender and ControlToValidate properties in MaskedEditValidator.
12.Now see the web site in browser. Download source code from above.
