Why doesn't my Input of type=number show a decimal when used with ASP.NET MVC?

Question

I'm trying to use a input number in MVC, it accepts correctly the comma (I'm in a culture with a comma as a decimal separator) and MVC accepts it with the custom binder I made. The value is correctly saving in database, and comes back.

The problem is, when passing the decimal value, which looks like 0.231 to the number control, I guess it tries to format it to my culture with a comma and doesn't work, so nothing appears.

The binder works on return to server, but do I need something else on the return to the control for it to work on the return to the page?

My control in the razor view:

@Html.EditorFor(model => model.DecimalValueForExample, new { htmlAttributes = new { @class = "form-control", @type = "number", @step = "any", @min = "0.001", autocomplete = "off" } })

My attribute in the viewmodel:

        [Display(Name = "DecimalValueForExample", ResourceType = typeof(Properties.Resources))]
        [DisplayFormat(DataFormatString = "{0:0.###}", ApplyFormatInEditMode = true)]
        [Range(0.001, double.MaxValue, ErrorMessageResourceName = "RangeErrorMessage", ErrorMessageResourceType = typeof(Properties.Resources))]
        [Required]
        public decimal DecimalValueForExample{ get; set; }

Solution 1

Nothing worked, especially across multiple browser. So the answer was to use a spinner control, I use http://www.virtuosoft.eu/code/bootstrap-touchspin/

Solution 2

This has been a browser compliance issue in the past and the levels of support varies between browsers and the OS. The last chart I have found is about 12 versions behind on Chrome, which at the time did not support commas on Windows. HTML5 number inputs – Comma and period as decimal marks

There were some JS workarounds that have appeared hear as well, html tag input of type=”number” and culture based decimal separator

Comments

[Nicolas Belley]

I'm currently using opera, and the comma is accepted when inputing the number, I think the problem is when it comes back that it has problem accepting the . from the decimal number.

[Mad Myche]

You may want to try adding the "lang" attribute to that input element to help the browser along. I generally write the majority of my form elements by hand and only populate the value portion from the model, as well as splitting these types of inputs so that they don't have to step through all the combinations

[Nicolas Belley]

I had faith with lang="fr-CA", nothing changed... It really is frustrating, I can save 1.1 and I can save 1,1! But the decimal on return never is shown. :(( I think I'll have to rely on jquery-ui spinner. It's really something uncanny in 2017 still fighting for decimal separator in modern browser and modern html 5 controls.