MSDN Magazine - February 2008 - (Page 43) Customize Controls with AJAX Extenders, Part 2 DINO ESPOSITO ast month I discussed how ASP.NET input controls such as textboxes and buttons could be enhanced by using AJAX control extenders. This month I’ll add more advanced features, such as masked editing and autocompletion, using the Microsoft® .NET Framework 3.5 and the newest version of ASP.NET, which was in Beta 2 at the time of this writing. In addition, I’ll be using the most recently available build of the ASP.NET AJAX Control Toolkit. For information on how to get the required software toolkits, refer to last month’s installment of Cutting Edge (see msdn.microsoft.com/msdnmag/issues/08/01/CuttingEdge). L number of real-world data types, including dates, currency, time, ZIP codes, phone numbers, Social Security or VAT IDs, and so on. In the AJAX Control Toolkit, the MaskedEdit extender is a free component that when attached to a TextBox control allows you to control input for a number of common scenarios. The MaskedEdit Extender In the AJAX Control Toolkit, the MaskedEdit extender supports a few data formats, which are specified by the MaskEditType enum type: public enum MaskedEditType { None, Date, Number, Time, DateTime } The Need for Masked Editing In HTML, the only way to accept input data is through the tag. In ASP.NET, the input tag is simply wrapped by the TextBox control. One problem with this control is that it doesn’t restrict what a user can type in it. But with a little bit of JavaScript code, you can filter out unwanted text. That’s what I covered last month. This month I’m adding masked editing, which allows characters to be filtered as they are typed and also to appear in a culture-specific format. Masked editing can be used for filtering, validation, automatic formatting, and localization. It can also be applied to a Figure 1 Predefined Placeholders for Input Masks Symbol 9 L $ C A N ? / : . , \ { } Description A numeric character A letter A letter or a blank A custom, case-sensitive character as defined by the Filtered property A letter or a custom character as defined by the Filtered property A numeric or custom character as defined by the Filtered property Any character A date separator according to the current culture A time separator according to the current culture A decimal separator according to the current culture A thousand separator according to the current culture An escape character The initial delimiter for repetition of masks The final delimiter for repetition of masks You can use the extender to enter numbers, dates, times, and date/ times. The extender decides its output based on given culture settings. The following code snippet shows the typical way to use the MaskedEdit extender with a textbox that accepts a date: The extender features a number of properties, which are listed online in Figure A at go.microsoft.com/fwlink/?LinkId=105569. You define an input mask mainly through two properties: Mask and MaskType. Mask has a default value of “” and specifies the mask of characters that is acceptable to the extender. MaskType has a default value of “”and indicates the mask type using any of the values defined by the MaskedEditType enumeration. The MaskType property informs the extender that the target control is going to accept a specific data type. The Mask property (of type string) indicates the sequence of characters that represents valid input for the textbox. For example, “12/6/07” and “12-09-2007” are both valid dates, but they use different input masks. To build a mask, you use predefined symbols as placeholders. The list of supported symbols is in Figure 1. For example, the “999,999.99” mask causes your code to accept a number with a decimal separator and at most one thousand separator. Figure 2 This column is based on a prerelease version of Visual Studio 2008. All information contained herein is subject to change. february2008 43 http://msdn.microsoft.com/msdnmag/issues/08/01/CuttingEdge http://msdn.microsoft.com/msdnmag/issues/08/01/CuttingEdge http://go.microsoft.com/fwlink/?LinkId=105569
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.