AJAX

Masked Edit Extender In ASP.NET

Masked Edit Extender

 

In this article, I will show you step by step procedure, how to use a Masked Edit Extender

 In ASP.NET using Visual Studio 2005 or Visual Studio 2008.

 

The use of Masked Edit Extender it that you are not require to type any number of character you have to just select from the up down button…it will change dynamically when you click the button,


To follow this code sample, you must use Visual Studio 2005 or Visual Studio 2008.

I have used <! –    –>  to comment HTML part of the code.

Note: Masked Edit Extender is a part of AjaxControlToolkit.
To attach right click on the toolbox under Ajax Extensions and select Choose Items - > Browse Button - > select the AjaxControlToolkit.dll. If you are using Visual Studio 2008, you may not need AJAX Toolkit but if you are using Visual Studio 2005, you will need to download it from http://www.msdn.com/ or http://www.asp.net/.

Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008

Step 2. Now go to File Menu -> New -> Web Site

Step 3. 

Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# , Visual Basic , J #)

Choose Visual C#

Step 4. Click on the OK Button.

This is the source code window and in this page you will se this code. 

 

<%@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

 

<!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>Type your webpage title here</title>  <!– Here you can specify your page title in between title tag ->

</head>

<body>

<form id=”form1? runat=”server”>

<div>

 

<!– In between div tags you can manage your web controls like buttons, labels, picture Box, ImageMap etc –>

 

 

</div>

</form>

</body>

</html>



See here is a tab named Design in the bottom of this page.
 
Step 5. Click on this tab and you will see a blank web page where you can drag any control from the toolbox (which is in the left side of this window).

Step 6. Now drag controls under the AJAX Extensions.

First control you are going to drag and drop on the page is - Script Manager.

first add a tag on the top of your source code window:

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

Under the form tag,

Don’t be frustrate on seeing this code please read carefully it’s very simple.

<asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

                <br />

                Enter the details below in the textboxes and you will see how the masked control

                Works

<br />

    <div>

        <asp:Label ID="Label1" runat="server" Text="Enter your name" ></asp:Label>

 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 

        <asp:TextBox ID="TextBox1" runat="server" Width="150px"></asp:TextBox>

<br />

<br />

 

        <asp:Label ID="Label2" runat="server" Text="Enter your roll number"></asp:Label>

 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       

        <asp:TextBox ID="TextBox2" runat="server" Width="150px"></asp:TextBox>               

           

<cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox2"

            MaskType="Number" Mask="999" MessageValidatorTip="true" AcceptNegative="None"

                                InputDirection="RightToLeft" ErrorTooltipEnabled="true" >

            </cc1:MaskedEditExtender>

 

<cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server"

             ControlToValidate="TextBox2" ControlExtender="MaskedEditExtender1"

             MinimumValue="1" MaximumValue="105" MinimumValueMessage="Please enter correct

             roll number" MaximumValueMessage="Invalid roll number! The highest roll

             number is 105" Display="Dynamic" IsValidEmpty="false"

             InvalidValueMessage="The roll number does not exist" EmptyValueMessage="The roll number is not entered">

            </cc1:MaskedEditValidator>                   

 

<br />

<br />

          <asp:Label ID="Label3" runat="server" Text="Enter date of birth (mm/dd/yyyy)"></asp:Label>       

        &nbsp;

            <asp:TextBox ID="TextBox3" runat="server" Width="150px"></asp:TextBox>       

           

<cc1:MaskedEditExtender ID="MaskedEditExtender2" runat="server" TargetControlID="TextBox3" MaskType="Date" Mask="99/99/9999" MessageValidatorTip="true" UserDateFormat="None" UserTimeFormat="None" InputDirection="RightToLeft" ErrorTooltipEnabled="true" >

            </cc1:MaskedEditExtender>

 

 

        <cc1:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ControlToValidate="TextBox3" ControlExtender="MaskedEditExtender2" Display="Dynamic" IsValidEmpty="false" InvalidValueMessage="Invalid date!" EmptyValueMessage="The date is not entered">

 

        </cc1:MaskedEditValidator>                   

        <br />

   


Step 7. Now run your web site by Ctrl + F5

OUT PUT
Step 8. When you run the Masked Edit Extender will seem like this...

 

Masked TextBox.JPG

 

Now in the Masked text boxes you can’t enter characters or hexadecimal values you can only enter digits and here will be some restrictions… which the masked text box will follow …

 

Step 9. Close Browser

 

Step 10. Close Visual Studio…

 

Thanks!


--Nikhil Kumar


manjil.jpg
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs