MVC Controls Toolkit

Typed TextBox 

This control needs reference to both MVCControlToolkit.Controls-x.x.x.js or the smaller MVCControlToolkit.Controls.Core-x.x.x.js and jquery-1.4.2.js. (or better)

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 jQuery timepicker, by simply passing a CalendarOptions object in the optional calendarOptions parameter. For details on the CalendarOptions class see the DateTimeInput Documentation.