Tuesday, October 16, 2012

MaskedEditExtender Example

 

Sample Example of MaskedEditExtender Control

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MaskedEditExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_MaskedEditExtender" %>

<!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>MASKED EDIT EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        Enter Number:<asp:TextBox ID="TxtNum" runat="server"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender ID="MaskEditExtender1" runat="server"
             TargetControlID="TxtNum" MaskType="Number" Mask="999">
        </ajaxToolkit:MaskedEditExtender>
      </div>
    </form>
</body>
</html>

Output :

MaskedEditExtender1           MaskedEditExtender2

When TextBox gets focus it shows the format of the text to be entered. like in the above example Mask value is “999” , so it shows ---. if it is “99/99/9999” then it shows –/—/----

In the above example Mask value is “999” , which means it allows only 3 digits to be entered in the textbox. If user enters only less than 3 digits then it takes 0 ‘s by default. if user leaves the textbox empty , it will not return any error as there is no validation for empty input.

To put validation for empty input , we can use “MaskedEditValidator” Control.

Here there is another example of “MaskedEditExtender” to take date input in the textbox.For this we specify the date format in the Mask attribute as “99/99/9999” .  We can use ‘-‘ delimiter also to specify date format. (99-99-9999)

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MaskedEditExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_MaskedEditExtender" %>

<!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>MASKED EDIT EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        Enter Date:<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
             TargetControlID="txtDate" MaskType="Date" Mask="99/99/9999">
        </ajaxToolkit:MaskedEditExtender>
    </div>
    </form>
</body>
</html>

Output :

MaskedEditExtender3                 MaskedEditExtender4

Posted by at
Labels:

4 comments:

Subscribe to: Post Comments (Atom)