Dotnet with Naveen: Masked Edit Extender Control

In this article I'm trying to explain how to work with MaskedEditExtenderControl in ASP.net AJAX. This article will help you for beginners those who are start to work with this.

MaskedEditExtender in ASP.net AJAX:

In this article I'm trying to explain how to work with MaskedEditExtenderControl in ASP.net AJAX. This article will help you for beginners those who are start to work with this.

AJAX:

For this we must download AJAX control Toolkit dll and add reference to the project, by right clicking the project and choose assembly reference to add that. After added the dll add below lines of code in source code.

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

MasedEdit Description:

MasedEdit is an ASP.net AJAX control has to be an attached to textbox control to restrict the text entered into textbox. MaskedEdit applies a "mask" to the input that permits only certain type of text. The supported data formats are "Numbers Date, Time, Date & time, None".

MaskedEdit Properties:

<ajaxToolKit:MaskedEditExtender  
TargetControlID="txt1"  
MaskType="Number" 
Mask="9,999,999.99" 
MessageValidatorTip="true"  
OnFocusCssClass="CssStyle" 
OnInvalidCssClas="CssStyle" 
InputDirection="RightToLeft" 
AcceptNagative="Left"
 DisplayMoney="Left" 
ErrorTooltipEnabled="true" 
AutoComplete="true"/>

TargetControlID – It targets the Textbox control

MaskType – There are 4 types

None- No action to be performed

Number – Number Validations

Time- Time Validations

Date – Date Validations

DateTime – Date & Time Validations

Mask – Type of format to be entered

MessageValidatorTip – Message Displayed when try to edit the data.

OnFocusCssClass – CssClass will be used when textbox receive focus.

OnInvalidCssClass – CssClass will be used when text is invalid.

InputDirection- There is 2 types

LeftToRight – Data to be entered from Left to right.

RightToLeft – Datato be entered from Right to Left.

AcceptNagative – There is 3 types

None – No validations

Left – Show the negative sign on left hand side.

Right – Show the negative sign on Right hand side

DisplayMoney – There is 3 types

None – No currency symbol to be displayed.
Left – Show the currency symbol on Left hand side of the control.
Right – Show the currency symbol on right hand side of the control.

ErrorTooltipEnabled – if it's true then it will display the error tooltip message when cursor moves over the control.

AutoComplete – To fill automatically when text is empty.

MaskType – Numbers, it will fill empty text with zeros.
MaskType – Date, it will fill empty text with Current system date.
MaskType – Time, it will fill empty text with current system time.
MaskType – DateTime, it will fill empty text with current system date and time.

AcceptAMPM – if it's true, then we can give P automatically cursor consider as PM, if it is A then cursor consider as AM.

MaskedEditValidator Description :

MaskedEditValidator is custom validator, it validates the entered text matches MaskedEdit Extender.

<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator2" runat="server" 
ControlExtender="mee" 
ControlToValidate="txtNum"            
IsValidEmpty="False" 
MaximumValue="80000" 
EmptyValueMessage="Number is required" 
InvalidValueMessage="Number is invalid"            MaximumValueMessage="Number > 80000" 
MinimumValueMessage="Number < 0" 
MinimumValue="0" 
Display="Dynamic"            
TooltipMessage="Input a number from 0 to 80000"          EmptyValueBlurredText="*" 
InvalidValueBlurredMessage="*"
MaximumValueBlurredMessage="*"
MinimumValueBlurredText="*"
ValidationGroup="MKE" />

ControlExtender – its targets to the MasekedEditExtender control
ControlToValidate – its targets to the textbox control.
IsValidEmpty – it will be used for giving tooltip message when textbox is empty or without enter details.
MaximumValue – its targets to enter maximum value into the textbox, it's cross the value then It will show error message.
EmptyValueMessage – If the value is empty its showing tooltip message.
InvalidValueMessage – if the value is invalid then it's showing tooltip message.
MaximumValueMessage – if the value crosses the maximum value then give some message for that using this property.
MinimumValueMessage – if the value is less than the minimum value then give alert message for that using this property.
EmptyValueBlurredText – If the value is empty then give the Text for that as required.
InvalidValueBlurredMessage- If the value is empty then using this control we can validate the control
MaximumValueBlurredMessage – if the value crosses the maximum value range then using this property we can validate the control.
MinimumValueBlurredText – If the entered value is less than the minimum value, then using this property we can validate the control.

Enter a Number (format: 9,999,999.99):

We must set the MaskType property for MaskedEditExtender Control as "Number"

<asp:TextBox ID="txtNum" runat="server" Width="130px" Height="16px" ValidationGroup="MKE" />

<ajaxToolkit:MaskedEditExtender ID="mee" runat="server"
            TargetControlID="txtNum"
            Mask="9,999,999.99"
            MessageValidatorTip="true"
            MaskType="Number"
            InputDirection="RightToLeft"
            AcceptNegative="Left"
            DisplayMoney="Left"
            ErrorTooltipEnabled="True"
            AutoComplete="true"
             />
<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator2" runat="server"
            ControlExtender="mee"
            ControlToValidate="txtNum"
            IsValidEmpty="False"
            MaximumValue="80000"
            EmptyValueMessage="Number is required"
            InvalidValueMessage="Number is invalid"
            MaximumValueMessage="Number > 80000"
            MinimumValueMessage="Number < 0"
            MinimumValue="0"
            Display="Dynamic"
            TooltipMessage="Input a number from 0 to 80000"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            MaximumValueBlurredMessage="*"
            MinimumValueBlurredText="*"
            ValidationGroup="MKE" />
        <br />

OutPut:

1) If I try to enter value in textbox the output page is become like below.

2) If I try to enter -2000 in to text, that means the value is less than the minimum value then the output become like below. It’s validating ( *) and if I move cursor to that control then it’s showing Tootip also for that.

3) Now, I enter the value between 0 to 80,000 then the output become like below.

Enter Time (format: HH:MM:SS):

We must set the MaskType property for MaskedEditExtender control as “Time”.

<asp:TextBox ID="txtTime" runat="server" Width="130px" Height="16px" ValidationGroup="MKE" />

<ajaxToolkit:MaskedEditExtender ID="mee1" runat="server"
            TargetControlID="txtTime" 
            Mask="99:99:99"
            MessageValidatorTip="true"
            MaskType="Time"
            AcceptAMPM="True"
            ErrorTooltipEnabled="True" />
        
<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator3" runat="server"
            ControlExtender="mee1"
            ControlToValidate="txtTime"
            IsValidEmpty="False"
            EmptyValueMessage="Time is required"
            InvalidValueMessage="Time is invalid"
            Display="Dynamic"
            TooltipMessage="Input a time"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE"/>

Output:

1) If I try to enter time the output of the page is look like below.

2) If I try to enter wrong time then the output become like below.

3) Now, I try to enter exact time.

Enter Date (format: mm/dd/yyyy):

For this we must set the MaskType property for MaskedEditExtender control as “Date”.

<asp:TextBox ID="txtDate" runat="server" Width="130px" MaxLength="1" style="text-align:justify" ValidationGroup="MKE" />
       
<ajaxToolkit:MaskedEditExtender ID="mee2" runat="server"
            TargetControlID="txtDate"
            Mask="99/99/9999"
            MessageValidatorTip="true"
            MaskType="Date"
            ErrorTooltipEnabled="True" />

<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator5" runat="server"
            ControlExtender="mee2"
            ControlToValidate="txtDate"
            IsValidEmpty="False"
            EmptyValueMessage="Date is required"
            InvalidValueMessage="Date is invalid"
            Display="Dynamic"
            TooltipMessage="Input a date"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE" />

Output:

1) The default nature of the page is like below

2) Now, I try to enter current date ( 24th oct 2013) . Date format is mm/dd/yyyy, but I try to enter dd/mm/yyyy format that is wrong. So, it’s showing the error message in validate and tooltip for that when cursor moves over the control.

3) Now, I try to enter today date in below format (mm/dd/yyyy).

Enter Date and Time (format: mm/dd/yyyy hh:mm:ss)

For this we must set the MaskType of MaskedEditExtender control as “DateTime”.

<asp:TextBox ID="txtdatetime" runat="server" Width="180px" ValidationGroup="MKE" />

<ajaxToolkit:MaskedEditExtender ID="mee3" runat="server"
            TargetControlID="txtdatetime" 
            Mask="99/99/9999 99:99:99"
            MessageValidatorTip="true"
            MaskType="DateTime"
            AcceptAMPM="True"
            ErrorTooltipEnabled="True" />
        
<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator6" runat="server"
            ControlExtender="mee3"
            ControlToValidate="txtdatetime"
            IsValidEmpty="False"
            EmptyValueMessage="Date and time are required"
            InvalidValueMessage="Date and/or time is invalid"
            Display="Dynamic"
            TooltipMessage="Input a date and time"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE" />

Output:

1) The default nature of this control is like below.

2) Now, I try to enter wrong format of date and time, then see the output and tooltip message for that.

3) Now I try to enter correct date and time format.

Source code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MaskedEdit.aspx.cs" Inherits="MaskedEdit" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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>
    <style type="text/css">
        .style1
        {
            font-family: "Trebuchet MS";
        }
        .style2
        {
            font-size: large;
            color: #003300;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1"  EnableScriptGlobalization="true" EnableScriptLocalization="true" />
    <div align="center" class="style1">
        
        <span class="style2"><strong>Masked Edit Demonistration</strong></span><strong><br 
            class="style2" />
        </strong>
        <br />
        <strong>Enter a Number (format: <em>9,999,999.99</em>):</strong>
        <br />
        <asp:TextBox ID="txtNum" runat="server" Width="130px" Height="16px" ValidationGroup="MKE" />
        <ajaxToolkit:MaskedEditExtender ID="mee" runat="server"
            TargetControlID="txtNum"
            Mask="9,999,999.99"
            MessageValidatorTip="true"
            MaskType="Number"
            InputDirection="RightToLeft"
            AcceptNegative="Left"
            DisplayMoney="Left"
            ErrorTooltipEnabled="True"
            AutoComplete="true"
             />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator2" runat="server"
            ControlExtender="mee"
            ControlToValidate="txtNum"
            IsValidEmpty="False"
            MaximumValue="80000"
            EmptyValueMessage="Number is required"
            InvalidValueMessage="Number is invalid"
            MaximumValueMessage="Number > 80000"
            MinimumValueMessage="Number < 0"
            MinimumValue="0"
            Display="Dynamic"
            TooltipMessage="Input a number from 0 to 80000"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            MaximumValueBlurredMessage="*"
            MinimumValueBlurredText="*"
            ValidationGroup="MKE" />
        <br />
        <strong>Enter Time (format: <em>HH:MM:SS</em>):</strong>
        <br />
        <asp:TextBox ID="txtTime" runat="server" Width="130px" Height="16px" ValidationGroup="MKE" />
        <ajaxToolkit:MaskedEditExtender ID="mee1" runat="server"
            TargetControlID="txtTime" 
            Mask="99:99:99"
            MessageValidatorTip="true"
            MaskType="Time"
            AcceptAMPM="True"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator3" runat="server"
            ControlExtender="mee1"
            ControlToValidate="txtTime"
            IsValidEmpty="False"
            EmptyValueMessage="Time is required"
            InvalidValueMessage="Time is invalid"
            Display="Dynamic"
            TooltipMessage="Input a time"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE"/>
        <br />
        <br />

        <strong>Enter Date (format: <em>mm/dd/yyyy</em>):</strong>
        <br />
        <asp:TextBox ID="txtDate" runat="server" Width="130px" MaxLength="1" style="text-align:justify" ValidationGroup="MKE" />
        
        <ajaxToolkit:MaskedEditExtender ID="mee2" runat="server"
            TargetControlID="txtDate"
            Mask="99/99/9999"
            MessageValidatorTip="true"
            MaskType="Date"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator5" runat="server"
            ControlExtender="mee2"
            ControlToValidate="txtDate"
            IsValidEmpty="False"
            EmptyValueMessage="Date is required"
            InvalidValueMessage="Date is invalid"
            Display="Dynamic"
            TooltipMessage="Input a date"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE" />
         
        <br />
         <br />

        <strong>Enter Date and Time (format: <em>mm/dd/yyyy hh:mm:ss</em>)</strong>
        <br />
        <asp:TextBox ID="txtdatetime" runat="server" Width="180px" ValidationGroup="MKE" />
        <ajaxToolkit:MaskedEditExtender ID="mee3" runat="server"
            TargetControlID="txtdatetime" 
            Mask="99/99/9999 99:99:99"
            MessageValidatorTip="true"
            MaskType="DateTime"
            AcceptAMPM="True"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator6" runat="server"
            ControlExtender="mee3"
            ControlToValidate="txtdatetime"
            IsValidEmpty="False"
            EmptyValueMessage="Date and time are required"
            InvalidValueMessage="Date and/or time is invalid"
            Display="Dynamic"
            TooltipMessage="Input a date and time"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE" />
        <br />
    </div>
    </form>
</body>
</html>

ScriptManager:

<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />

Without wrote this line in source code it’s throws the server error to overcome this issue we just add above lines of code under form tag.

Conclusion :

During this process we can able to enter the desired format and validate that format, this article will help those who are looking for the same.

Dotnet with Naveen

About Me

Friday 20 November 2015

Masked Edit Extender Control

MaskedEditExtender in ASP.net AJAX:

AJAX:

MasedEdit Description:

MaskedEdit Properties:

MaskedEditValidator Description :

Enter a Number (format: 9,999,999.99):

OutPut:

Enter Time (format: HH:MM:SS):

Output:

Enter Date (format: mm/dd/yyyy):

Output:

Enter Date and Time (format: mm/dd/yyyy hh:mm:ss)

Output:

Source code:

ScriptManager:

Conclusion :

No comments:

Post a Comment