"If at first you don't succeed; call it version 1.0" :-Unknown

Pages

Thursday, June 2, 2011

Ajax MaskedEdit and Validator Sample.

MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to restrict the kind of text that can be entered. MaskedEdit applies a "mask" to the input that permits only certain types of characters/text to be entered. The supported data formats are: Number, Date, Time, and DateTime. MaskedEdit uses the culture settings specified in the CultureName property More>>
Demo



  • 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

    Examples:
    9999999 - Seven numeric characters
    99\/99 - Four numeric characters separated in the middle by a "/" 
Code:




<%@ 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">
<script runat="server">  
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            TextBox1.ForeColor = System.Drawing.Color.OliveDrab;
            TextBox1.BackColor = System.Drawing.Color.Snow;
            TextBox1.Font.Name = "Verdana";
            TextBox1.Font.Size = FontUnit.Large;
            TextBox1.Height = 35;
            Label1.ForeColor = System.Drawing.Color.OrangeRed;
            Label1.Font.Size = FontUnit.XLarge;
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Meeting Time ";
        Label1.Text += Convert.ToDateTime(TextBox1.Text).ToShortTimeString();
    }  
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ajax MaskedEditExtender MaskType Time</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <hr width="475" align="left" title="Welcome to simplyasp.blogspot.com" color="black" />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <br />
        <asp:Label ID="Label1" runat="server">  
        </asp:Label>
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="Enter Time 24 hr format [hh/mm/ss] " 
            ForeColor="Brown"
            Font-Bold="true">  
        </asp:Label>
        <br />
        <asp:TextBox ID="TextBox1" runat="server">  
        </asp:TextBox>
        <cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" 
            TargetControlID="TextBox1"
            Mask="99:99:99" MaskType="Time" MessageValidatorTip="true">
        </cc1:MaskedEditExtender>
        <cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" 
            ControlToValidate="TextBox1"
            ControlExtender="MaskedEditExtender1" IsValidEmpty="false" 
            EmptyValueMessage="Input time"
            InvalidValueMessage="inputted time not valid">  
        </cc1:MaskedEditValidator>
        <br />
        <br />
            
        <asp:Label ID="Label3" runat="server" Text="Enter Time Am/Pm format [hh/mm/ss] " 
            ForeColor="Brown"
            Font-Bold="true">  
        </asp:Label>
        <br />
        <br />
        <asp:TextBox ID="txt_AmPm" runat="server"></asp:TextBox>
        <cc1:MaskedEditExtender ID="MaskedEditExtender2" runat="server" Mask="99:99" 
            AcceptAMPM="true"
            MaskType="Time" UserTimeFormat="None" TargetControlID="txt_AmPm">
        </cc1:MaskedEditExtender>
        <cc1:MaskedEditValidator ID="MaskedEditValidator2" runat="server"  
            ControlExtender="MaskedEditExtender2"
            ControlToValidate="txt_AmPm" 
            InvalidValueMessage="inputted time not valid "  
            TooltipMessage="Please enter a time">
        </cc1:MaskedEditValidator>
    </div>
    </form>
</body>
</html>
I hope u got it now if u have any trouble, inform me.

Stay tune...
Have a nice day... 'N happy Coding :)

No comments: