Typed TextBox 

This control needs reference to MVCControlToolkit.Controls.Core-x.x.x.js. Moreover, if the date part of the DateTime must be shown with a Datepicker one of the following must be installed: jQuery Datepicker, Bootstrap Datepicker, or jQuery mobile Datebox. The control autodetects which Datepicker is installed and behaves accordingly. The Datepicker scripts must be placed before  MVCControlToolkit.Controls.Core-x.x.x.js since autodetection takes place there.

DateTime TypedTextBox Watermark

DateTime TypedTextBox with a value

float TypedTextBox

The typed text box adds to the usual TextBox rendered with the standard MVC helpers the following feature:

  1. When it is empty it shows a watermark, and applies a watermark style. The watermark is defined by the Prompt property of the standard  .Net DisplayAttribute, and can be overriden by an helper parameter.
  2. When the user is not editing it and it is not empty, it shows the data it contains in a "formatted" form. The formatted form is built as follows:
    • Only if the data it contains is a number it is formatted according to the numeric formats defined here: the Globalize library. Please note that this is a subset of the standard formatting options available in .Net. 
    • A string prefix and a string postfix are applied to the the result of the previous step
    • The above steps are applied each time the user modify the text box value
    • The client formatting string, the prefix and the postfix are defined in the Mvc Controls Toolkit FormatAttribute that inkerits from the .Net standard DisplayFormatAttribute.
    • The FormatAttribute specifications can be overriden by optional parameters of the helper.
  3. When in edit mode all formatting disappears to allow editing. In case of numbers only characters adequate for the TextBox type are allowed while typing. Thus, for instance in case of an unsigned integer no sign and no decimal separator will be allowed.

Below an example of use of the TypedTextBoxFor helper:

 

@Html.TypedTextBoxFor(m => m.PersonalData.Age, contentAlign: ContentAlign.Right, watermarkCss:"watermark") 

 

If no watermarkCss parameter is provided the CSS class for the watermark is set automatically to: Theme-TypedTextBox-Watermark. This is the class used by thems to style watermarks

Below also the property declaration with the Data Annotations that specifies both watermark and formatting:

 

        [Display(ResourceType=typeof(Resource1), Prompt = "UserAgePrompt")]
        [Format(typeof(Resource1), "UserAgePrefix", null, ClientFormat="n" )]
        public float? Age { get; set; }

 

Please notice that both watermark and formatting are specified with the help of a resource file. UserAgentPrefix is the key to retrieve the prefix, while the postfix is null.

If The DataType rendered in the TypedTextBox is a DateTime, one can specify to show a Datepicker, by simply passing a CalendarOptions object in the optional calendarOptions parameter. For details on the CalendarOptions class see the DateTimeInput Documentation.

Important: when using either Bootstrap or jQuery Mobile Datepickers the only option used is the Dateformat, all other options must be passed as Html 5 attributes as detailed in the Datepickers documentation, however a CalendarOptions instance must be passed in any case, otherwise the control assumes that no Datepicker must be shown. Usually, no DateFormat is passed and the right format is extracted either by a FormatAttribute or by a DisplayFormatAttribute. If no format is specified the short date format for the current culture is used.

Last edited Jun 22, 2014 at 10:55 AM by frankabbruzzese, version 20

Comments

frankabbruzzese May 17, 2013 at 6:44 AM 
No textareas are not supported. The main purpose of the TypedTextBox is formatting, and keyboard handling for dates and numbers. Textareas are just for strings, so you have no formatting problem. You may simply use a jquery watermark plugin

icrisp Feb 4, 2013 at 4:15 PM 
Hi, ? I would like to watermark a multi-line text box

Will you be supporting testarea and watermarks? or do you have alternative method to watermark a textare / multi-line textbox?

Thanks