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; }

I think that the html5 <input type="number" ...> works best with integers, not numbers with decimal fraction. Try it on w3schools: w3schools.com/html/html_form_input_types.asp — mortb
– mortb, Commented Apr 13, 2017 at 12:46
It works fine with decimal, I just saved an example here: w3schools.com/code/tryit.asp?filename=FELCCBVINC0P — Nicolas Belley
– Nicolas Belley, Commented Apr 13, 2017 at 12:49

Community · Accepted Answer · 2017-05-23 12:17:59Z

1

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

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 13, 2017 at 12:52

Mad Myche

1,0751 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicolas Belley Over a year ago

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 Over a year ago

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 Over a year ago

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.

Nicolas Belley · Accepted Answer · 2017-05-09 19:35:48Z

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/

answered May 9, 2017 at 19:35

Nicolas Belley

8623 gold badges14 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related