Home / Questions / 372027
Accepted
Edwin Romero
Asked: 2020-07-09 10:28:09 +0800 CST 2020-07-09 10:28:09 +0800 CST

thousands separator, decimals asp core 3.x and jquery?

  • 772

This is a problem that has been talked about for a long time and at least those of us who have been working with asp mvc since 2010 have had it.

And now in ASP Core 3.x it has not been the difference, now that I am developing a web application from scratch I ran into this old enemy.

And what's the problem? Well, it doesn't matter if you're using American regional comma(,) for thousands and dot(.) for decimals or European dot(.) for thousands and comma(,) for decimals, jquery always triggers the error when validating the field. .

enter image description here

The error is not from asp core, it is actually from jquery that always expects the number to be 2500.25 if with an American decimal point, which makes it a problem for those of us who work with applications that are used in both America and Spain.

asp.net-mvc

1 Answers

  1. Best Answer

    I corrected it by making the decimals in my model a string and then converting it to a decimal in the entity, but although this type of conversion and validation is negligible, it takes time and slows down your application.

    But I wanted to take advantage of a feature of ASP Core where you can manipulate the model and I think it's a much more natural solution in the style of an MVP(Most Valuable Professional) :D, although I'm not but I try.

    In my model I have something like this:

          [DataType(DataType.Currency), DisplayFormat(DataFormatString = "{0:n}", ApplyFormatInEditMode = true)]
      [Required, Display(Name = "Neto", Description = "Neto de la factura", Prompt = "Neto de la factura")]
      public Decimal neto { get; set; }

    1. First I remove the validation for all the decimal fields for the view that way jquery doesn't send me the error in question and I do it like this for input:

      <script type="text/javascript"> $("#neto").removeAttr("data-val"); </script>

    2. With jquery I manipulate the input so that I put a thousands and decimals separator, I do not publish it because there are many methods on the web and I am sure they are better than mine.

    3. I am going to bind the decimal type and for that I will create a couple of classes inside a Binder folder, which can have any name.

    enter image description here

    1. We create the first class that is the link with an interface of ASP itself to make the binder in this way you can copy it in its entirety.

    Code:

    public class CustomBinderProvider : IModelBinderProvider
{
     public IModelBinder GetBinder(ModelBinderProviderContext context)
     {
          if (context == null)
          {
               throw new ArgumentNullException(nameof(context));
          }

          if (context.Metadata.ModelType == typeof(decimal))
          {
               return new DecimalModelBinder();
          }

          return null;
     }
}

    If you look, we work with the IModelBinderProvider interface and we indicate that when the model reaches a Decimal type, it implements the DecimalModelBinder() class.

    That I also leave them here with comments:

    public class DecimalModelBinder : IModelBinder
{
     public Task BindModelAsync(ModelBindingContext bindingContext)
     {
          var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

          //Primero obtenemos el separador de miles para procesar la información aqui no nos interesa
          //el separador decimal porque a este es ya core y eso lo maneja perfecto el framework
          var separadormiles = valueProviderResult.Culture.NumberFormat.CurrencyGroupSeparator;

          //Si es nulo pues finaliza la clase sin hacer más
          if (valueProviderResult == null)
          {
               return Task.CompletedTask;
          }

          //obtenmos el valor del modelo 
          string value = valueProviderResult.FirstValue;

          //si no hay valor finaliza si hacer nada
          if (string.IsNullOrEmpty(value))
          {
               return Task.CompletedTask;
          }

          // Removemos comas o puntos (separador de miles) nada mas
          // los decimales no importa si es separado por coma o punto 
          // dependiendo la region ya que eso lo manipula bien core
          value = value.Replace(separadormiles, string.Empty).Trim();

          decimal myValue = Convert.ToDecimal(value);

          //retornamos el valor que si se manipula perfectamente en el controller
          //mapping o clase
          bindingContext.Result = ModelBindingResult.Success(myValue);
          return Task.CompletedTask;
     }
}

    1. Only one last thing is needed is to make the injection in the Startup.cs in the "ConfigureServices(IServiceCollection services)" section we add the following:

              #region Binder

        services.AddControllers(options =>
        {
             options.ModelBinderProviders.Insert(0, new CustomBinderProvider());
        });

        #endregion

    And well, it's like this, we can manipulate the model in an elegant way in ASP Core 3.x. Any questions, let me know.

    • 3