MVC format number EU style for both server and client side

Question

I'm searching for days how to format my both double and double? inputs as decimal = comma and thousand separator =dot

example:

123456.01 ==> 123.456,01

14,02 ==> 14,02

987654321,002 ==> 987.654.321,002

what i did so far:

I checked server/local region setting
add globalization in my web.config

globalization uiCulture="fr-BE" culture="fr-BE
In my model i used the following attribute (but i'm using TextBoxFor)
```
[DisplayFormat(DataFormatString = "{0:N3}", ApplyFormatInEditMode = true)]
```
@Html.TextBoxFor( model => model.size, new {tabindex=11, id = "SizTotText", @class = "form-control input-sm calc" })

but How can I:

1- while user is typing, the number should be formatted ? I found this solution: how to format input box text as I am typing it but i cannot switch comma with Dot Fiddle

2- Created Custom helper following this post (changed decimal to double)Post

there are a lot of solution in stackoverflow but none seems to work for me.

I hope my question is clear and sorry for my bad english

EDIT:

I decided to ignore the client formatting, no more dot's and comma but i still have issue with the regional setting.

My application still treating the dot as decimal separator, how can i fix this? and more funny, it accepts some fields and others not, although they all have the same attribute, settings ... etc see screen shot

The field that has an error is a calculated field

   var url = '@Url.Action("CalculateDropPrec", "Drop")';
    $('.calc').change(function () {
        // get the values of the textboxes
        var numUsed = $('#numUseText').val();
        var totNumUsed = $('#totNumUseText').val();
        $.post(url, { nUsed: numUsed, tUsed: totNumUsed }, function (response) {
            $('#precText').val(response);
        });
        return false;
    });


@Html.TextBoxFor(model => model.PerceDropTot, new {data_val = "false", id = "precText", name = "precText", @class = "form-control input-sm drop-read", placeholder = "0.0", @readonly = "readonly" })


public JsonResult CalculateDropPrec(double nUsed, double tUsed)
{
    var result = CommonComputation.CalcPrecDrop(nUsed, tUsed);
    return Json(result);
}

Adding the thousands separator in the textbox means you could not bind to your model without also creating a custom model binder that converts your string back to a `decimal` (a `decimal` type cannot be bound to a value containing thousands separators). You might consider [this project](https://github.com/stephenmuecke/mvc-numericinput) as an alternative — , Apr 04 '17 at 22:41
Rather than setting `$('#precText').val(response);` you could try to first format the result to a number of you expected format and precision, doing something like this: `$('#precText').val(parseFloat(response).toFixed(3));` — thmshd, Apr 06 '17 at 09:01

score 0 · Accepted Answer · answered Apr 04 '17 at 14:25

This is probably not going into the direction you want, but is "number formatting as you type" really desired? the downside is that the behaviour can become very tricky, and I mean also for the user. Assume that you type the number "1234" which becomes "1.234". When the input field is focused again and the caret is placed here: "1.|234", is it clear what happens when Backspace is hit? Is the point removed, or the 1? What happens when the user tries to type , or . manually? All the questions need to be considered. Also, when you POST the value in a FORM, it's not a valid numeric when formatted.

For those reason, even advanced Controls with Numeric Inputs like the Kendo UI NumericTextBox which we use heavily, choose to format a display-only value but not intercept user inputs (try the linked Demo).

But you can also check how cleave.js solves the issue, it does the realtime formatting, but probably uses the browsers culture settings. But personally don't like how it behaves when trying to correct already existing values.

Thankx for taking the time to answer my question, I decided to ignore the formatting part however randomly some fields are not treated as numeric please see my update — Maro, Apr 06 '17 at 08:41

MVC format number EU style for both server and client side

1 Answers1