example of ajax control "MaskedEdit" using asp.net

MaskedEdit.aspx



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

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

<!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">
<script type="text/javascript"> 
        Sys.debug = true; 
        Sys.require(Sys.components.maskedEdit, function() { 
            Sys.create.maskedEdit.defaults = { 
                OnFocusCssClass: "focus", 
                OnInvalidCssClass: "invalid", 
                OnFocusCssNegative: "negative", 
                OnBlurCssNegative: "negative" 
            } 
            $("#money").maskedEdit({ 
                Mask: "9,999,999.99", 
                AcceptNegative: Sys.Extended.UI.MaskedEditShowSymbol.Left, 
                MaskType: Sys.Extended.UI.MaskedEditType.Number 
            }); 
            $("#date").maskedEdit({ 
                Mask: "99/99/9999", 
                MaskType: Sys.Extended.UI.MaskedEditType.Date 
            }); 
        }); 
    </script> 
<style type="text/css"> 
        .focus  
        { 
            background-color: #DDDDFF; 
            border: solid 1px blue; 
        } 
        .invalid  
        { 
            background-color: #FF0000; 
            border: solid 1px #FF0000; 
        } 
        .negative 
        { 
            background-color: #FF5555; 
        } 
    </style> 
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ScriptManager1" runat="server"></asp:ToolkitScriptManager>
       <div><table>
    <tr><td>
    <strong>Enetr a number (Format:<em>9,999,999,99)</em></strong></td>
        <td>
        <asp:TextBox ID="TextBox1" runat="server" Width="130px" Height="16px" ValidationGroup="MKE"></asp:TextBox></td>
        <td>
        <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
        TargetControlID="TextBox1" 
    Mask="9,999,999.99" 
    MessageValidatorTip="true" 
    OnFocusCssClass="MaskedEditFocus" 
    OnInvalidCssClass="MaskedEditError" 
    MaskType="Number" 
    InputDirection="RightToLeft" 
    AcceptNegative="Left" 
    DisplayMoney="Left" 
    ErrorTooltipEnabled="True" >
    </asp:MaskedEditExtender>
        <asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server"
        ControlExtender="MaskedEditExtender1"
        ControlToValidate="TextBox1"
        IsValidEmpty="false"
        MaximumValue="  12000"
        EmptyValueMessage="number is required"
        InvalidValueMessage="number is in valid"
        MaximumValueMessage="number is grater 12000"
        MinimumValueMessage="number is less -100"
        MinimumValue="-100"
        Display="Dynamic"
        TooltipMessage="input number -100 to 12000"
        EmptyValueBlurredText="*"
        InvalidValueBlurredMessage="*"
        MaximumValueBlurredMessage="*"
        MinimumValueBlurredText="*"
        ValidationGroup="MKE">
        </asp:MaskedEditValidator><br /><em><span style="font-size: 8pt">Tip: Type '.' to switch</span></em></td></tr>
   
        <br /><br />
        <tr><td>
    <strong>Enetr a time (Format:<em>99:99:99)</em></strong></td>
    <td>
        <asp:TextBox ID="TextBox2" runat="server" Width="130px" Height="16px" ValidationGroup="MKE"></asp:TextBox></td>
        <td>
        <asp:MaskedEditExtender ID="MaskedEditExtender2" runat="server"
        TargetControlID="TextBox2" 
    Mask="99:99:99" 
    MessageValidatorTip="true" 
    OnFocusCssClass="MaskedEditFocus" 
    OnInvalidCssClass="MaskedEditError" 
    MaskType="Time" 
    AcceptAMPM="True" 
    ErrorTooltipEnabled="True" >
    </asp:MaskedEditExtender>
        <asp:MaskedEditValidator ID="MaskedEditValidator2" runat="server"
        ControlExtender="MaskedEditExtender2"
        ControlToValidate="TextBox2"
        IsValidEmpty="false"
        EmptyValueMessage="time is required"
        InvalidValueMessage="time is in valid"
        Display="Dynamic"
        TooltipMessage="input number -100 to 12000"
        EmptyValueBlurredText="*"
        InvalidValueBlurredMessage="*"
        ValidationGroup="MKE"></asp:MaskedEditValidator>
        <br /><br />
        </td></tr>
        <tr><td>
        <strong>Enetr a date & time (Format:<em>99/99/9999 99:99:99)</em></strong></td>
        <td>
        <asp:TextBox ID="TextBox3" runat="server" Width="130px" Height="16px" ValidationGroup="MKE"></asp:TextBox></td>
        <td>
        <asp:MaskedEditExtender ID="MaskedEditExtender3" runat="server"
        TargetControlID="TextBox3" 
    Mask="99/99/9999 99:99:99" 
    MessageValidatorTip="true" 
    OnFocusCssClass="MaskedEditFocus" 
    OnInvalidCssClass="MaskedEditError" 
    MaskType="dateTime" 
    AcceptAMPM="True" 
    ErrorTooltipEnabled="True" >
    </asp:MaskedEditExtender>
    <asp:MaskedEditValidator ID="MaskedEditValidator3" runat="server"
        ControlExtender="MaskedEditExtender3"
        ControlToValidate="TextBox3"
        IsValidEmpty="false"
        EmptyValueMessage="date and time is required"
        InvalidValueMessage="date and time is in valid"
        Display="Dynamic"
        TooltipMessage="input date and time"
        EmptyValueBlurredText="*"
        InvalidValueBlurredMessage="*"
        ValidationGroup="MKE"></asp:MaskedEditValidator>
        <br /><br />
        </td></tr>
    </table>   
    </div>
   
    </form>
</body>
</html>









MaskedEdit.aspx.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class MaskedEdit : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}


0 comments :