[How Do I:] Use the ASP.NET AJAX MaskedEdit Controls?

Please install Silverlight or click download to watch video locally.

The ASP.NET AJAX Control Toolkit provides the MaskedEdit control and the MaskedEditValidator control which work together to prompt, style, and validate the data that the user enters in a text box. This allows the Web page to provide the user with immediate visual feedback on whether the data entered is of a valid type and format.

Presented by Joe Stagner

Duration: 17 minutes, 33 seconds

Date: 04 April 2007

Watch    Video   |   Download    Video   |   VB Code    C# Code

Video downloads: WMV  |  Zune  |  iPod  |  PSP  |  MPEG-4  |  3GP

Audio downloads: AAC  |  WMA  |  MPEG-4  |  MPEG-3  |  MPEG-2

Comments : 29

Leave a Comment

sandpointguy : On April 05, 2008 4:37 PM said:

Thanks Joe, this is real helpful.  The formatting looks cool when I enter data for the first time, but if Im working with data that already exists for the form (such as Ive populated from a database) the formatting doesnt take effect until the control gets focus.  Id like to also use it for initial display formatting.  Is that possible?

JoeStagner : On April 14, 2008 8:42 PM said:

Interesting, can you email me an example ?

cwang : On May 28, 2008 3:41 PM said:

Hi Joe, is it possible for this control to validate date format such as "May 27, 2008"?

jay2_deguzman : On July 31, 2008 2:44 AM said:

hi! were can i download the raw file of stylesheet.css so dat i can have the idea on how to make one for the maskedEditfocus etc..

cv_vikram : On August 06, 2008 2:49 PM said:

Very good tutorial.....thanks

ACE1 : On October 01, 2008 11:22 AM said:

In your example, when you entered the money, it started in the cents field.  When I do it, it starts at the ones spot and I need to use the decimal to get to the cents portion.  I want to be able to key in the value without using the decimal.  For example, if I type in 10050, it would show up as 100.50.  Is this possible?

Vivek Vashisht : On November 06, 2008 7:49 AM said:

How to validate time in hh:mm format?

salsam : On November 14, 2008 8:42 AM said:

Hi Joe,

I am trying to use this control but having problem with MaskEditvalidator.

My web application is using common master page which has a ValidationSummary Control. and my all pages use that summary contol to show error messages.

Now i m using MaskedEditValidator in one of my page and using its InvalidValueMessage to check if valid value is passed in the textbox or not.

But on the postback, even with the valid value it is showing me InvalidValue message.

Is there any way I can use Server-Side Validaton istead??

Stevishere : On November 19, 2008 3:16 PM said:

Thanks for the Video Joe.  I have the same situation as sandpointguy.  I realize we can set "ClearMaskOnLostFocus = False" but doing that blows the ability to save to the database.  

I had used the Masked Edit Extender on a databound textbox where I formatted the data as {0:C}. Any ideas how I can do this and still allow (and retain) a negative currency amount?

Bob K : On December 02, 2008 2:15 PM said:

Joe,

Very helpful. Couple questions:

On the number format can you specify the number of decimal places?

Also can the number of Decimal places be changed dynamically?

indyHarcourt : On December 30, 2008 11:38 AM said:

Thanks for the informative video. When I create a field for money, it works find, but when the user tabs out of the field, the dollar sign goes away. Is there a way to keep the dollar sign with the number when the user tabs away from the field?

Also, when I pre-populate the field with an existing amount, I cannot seem to get the dollar sign to appear at all when displaying the screen, when the focus is not on that field. I'm populating the field with this:

txtLoanAmount.Text = String.Format ( "{0:c}", LoanAmount );

But it isn't displaying the dollar sign. As a test, I created another text box below it that does not have the extender, set it's value the same way, and the dollar sign does appear. Any thoughts?

annisites : On January 02, 2009 9:20 PM said:

hi Joe,

     I tried using this contol on a data repeater and it works great until I retrieve information back from database to display. for example mask is set to "9999.99" and the database is returning just 12, maskedit forces it to show as 1200.00 although autocomplete is set to fase. I tried everywhich way but in vain. any ideas on this?

Thanks!!

annisites : On January 02, 2009 10:44 PM said:

with the combination of string formatting it may be possible to achieve the above mentioned problem.

dinparacha : On January 13, 2009 2:30 PM said:

Hi, Just want to let you know what I did, waiting for the fix:

-Open AjaxControlToolkit.sln

-Open MaskedEditBehavior.js

- In function _onBlur AND in the function _Initialize (ligne 230) add the else of the following if:

// clear mask and set CSS

if (this._ClearMaskOnLostfocus)

{

wrapper.set_Value(this._getClearMask(wrapper.get_Value()));

}

else

{

 if (wrapper.get_Value() == "__-__-____" || wrapper.get_Value() == "(___) ___-____" || wrapper.get_Value() == "___-___-___"  //Phone

           || wrapper.get_Value() == "___-__-____")   //SSN

wrapper.set_Value("");

}

-Generate the projet

-Copy de DLL in debug/bin to your projects.

Of course, I hard coded the masks I am using, I'm sure there is another way by using string _EmptyMask or something like that.

djibril_chimere_DIAW : On January 23, 2009 10:25 AM said:

Thanks ! Jërëjëf!

kdj : On February 05, 2009 2:10 PM said:

IN SAFARI !The backspace and delete keys are disabled when a mask is applied to textbox!!! There are way to many glitchy things with this tool kit. This could make things very inconvenient for someone who enters incorrect info.

joer98 : On February 18, 2009 2:58 PM said:

Is there anyway of setting the EditMaskValidator control values via code-behind?  I would like to set the MaxValue, but my value will come a SQL Query.

ggamble : On February 24, 2009 6:34 PM said:

Is there anyway to set a phone mask, such as (999) 999-9999 9999, such that if the user doesn't enter the extension it won't add 0000, but leave it empty? May there is an option character instead of '9' for numbers?

ggamble : On February 24, 2009 7:05 PM said:

Got it ...

Set 'AutoComplete' value to a space, then set the 'PromptCharacter' to a space. Now when I enter a phone number without an extension it shows without the extension place holders. If I do have an extension it still maintains the formatting.

himait : On April 06, 2009 5:53 AM said:

Hi Joe

Very Good;

Thanks,

smurtuza : On May 04, 2009 6:00 PM said:

Hi Joe,

Can one MaskEditor be assigned to multiple textboxes?

Thanks.

sasiatia : On May 13, 2009 3:53 PM said:

hi Joe, I'm I've used the maskedit for the following mask 9,999,999 but when I try to save the value of the text box back to datatype of Int it fails due to the thousand separtor, what is the workaround for this.

ccatto : On May 26, 2009 8:11 PM said:

Thx Joe good example of the Masked Edit Control

thewire : On June 12, 2009 1:09 PM said:

Is it possible to default the time mask to PM?

nimesh.blogger : On August 05, 2009 5:00 PM said:

Hello All,

Namespace is logical group of Classies which are help to develop application.

I have put article about namespace in DotNet.. Must read.. It's really helpfull

for further infomration open "http://developmentwithdotnet.blogspot.com"

Thanks

-Nimesh.

nimesh.blogger : On August 05, 2009 5:02 PM said:

Hello All,

Namespace is logical group of Classies which are help to develop application.

I have put article about namespace in DotNet.. Must read.. It's really helpfull

for further infomration open "http://developmentwithdotnet.blogspot.com"

Thanks

-Nimesh.

nimesh.blogger : On August 17, 2009 4:18 PM said:

Hello All,

This Article about Data Access Object in .NET. Must read.

How to deal with Data Access Object in .NET Framework, all points explain in this Article.

It's really very userfull.

for further infomration open "http://dotnetheavens.blogspot.com/"

Thanks

-Nimesh.

nimesh.blogger : On August 17, 2009 4:20 PM said:

Hello All,

This Article about Data Access Object in .NET. Must read.

How to deal with Data Access Object in .NET Framework, all points explain in this Article.

It's really very userfull.

for further infomration open "http://dotnetheavens.blogspot.com/"

Thanks

-Nimesh.

orlando876 : On September 30, 2009 6:37 PM said:

I have a challenge with the MaskedEditExtender it is at the bottom of my page which is in a data gridview is is a subpage of my master page. The problem is i am unable to see the section of the dateextender the intersect with my masterpage footer. Yes the ajaxmanager is on the master page

Leave a Comment

You must be logged in to leave a comment. Click here to log in.

Microsoft Communities