Html5 inputs and fallback

Asp.net core Mvc Controls Toolkit enhances the input tag helper to select the right Html5 input type based on the .Net type and a possible property DataTypeAttribute. Below the mapping:

  • All numeric types map to the number input type. If you need a type range specify the input type explicitely to override the automatic selection. See live number and range
  • DateTime maps to date if the property has a Date, DataTypeAttribute otherwise to datetime-local. See live date and datetime-local. Important: when a datetime-local is bound to a DateTimeOffset instead of a simple DateTime, once in the browser time is converted and shown automatically in the client time zone.
  • TimeSpan with Time, DataTypeAttribute maps to time. See live time
  • string always maps to text, but when there is a Color, DataTypeAttribute in which case it maps to color. See live color
  • Week structure maps to week. See live week
  • Month structure maps to month. See live month

Default installation adds the bootstrap-html5-fallback JavaScript package that automatically provides fallback widgets when an Html5 input is not available. Usage of widgets may be forced by setting the property with the name of the Html5 type to true in the options object in wwwroot/startupjs/startup.js:

options.browserSupport = {
    cookie: "_browser_basic_capabilities",
    forms: null,
    fallbacks: {
        number: {
            force: true
        },
        range: {
            force: false
        },
        time: {
            force: true
        },
        date: {
            force: true
        },
        ....
        ...

The right format of all .net types is automatically checked on the client side by the jquery-validation-unobtrusive-extensions module. Please refer to the input validation section for more infos on how to customize and localize all error messages.


Fork me on GitHub