Htykuut

I am working on financial software which uses a lot of currency values and percentages. Without putting any thought into usability, if you create a default TextBox and bind it to a decimal 0.00M, it appears to the user as 0.00. It is ambiguous whether they should enter 6% as 6.00 or 0.06. You also run into the problem where .065 displays as 0.06, which makes the value appear incorrect to the user.

To clarify the intent of the numbers, I am using display attributes like this:

[Display(Name = "State Tax Rate")]

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:P2}")]

public decimal StateRate { get; set; }



[Display(Name = "Combined Tax Rate")]

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:P2}")]

public decimal CombinedRate { get; set; }



[Display(Name = "County Tax Rate")]

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:P2}")]

public decimal CountyRate { get; set; }

Now 6.5% is displayed as 6.50%, which is better from a usability standpoint, but when you post the form to an ASP.Net Core MVC controller, the values do not bind. Simply stripping the percentage sign causes it to bind at 650%. The approach I am taking is to use JQuery to clean up the data before the post takes place:

// deal with percentages:

// 6.5% does not bind, but is displayed to the user.

// 6.5 binds incorrectly (650%)

// .065 is desired format

$(function () {

    $('#my-form').on('submit', function (e) {

        e.preventDefault();                     // avoid default post routine



        // change "6.50%" to 6.5

        var stateRate = parseFloat($('#StateRate').val().replace('%', ''));             

        var combinedRate = parseFloat($('#EstCombinedRate').val().replace('%', ''));

        var countyRate = parseFloat($('#EstCountyRate').val().replace('%', ''));



        // change 6.5 to .065 - leave 0.065 alone.

        if (stateRate > 1) {

            stateRate = stateRate / 100.0;  

        }

        if (combinedRate > 1) {

            combinedRate = combinedRate / 100.0;

        }

        if (countyRate > 1) {

            countyRate = countyRate / 100.0;

        }



        // put the cleaned up values back into the form fields

        $('#StateRate').val(stateRate);     

        $('#CombinedRate').val(combinedRate);

        $('#CountyRate').val(countyRate);



        // make ajax request

        $.post(

            '/MyController/EditTaxRates'

            $(this).serialize(),

            function (data, status, jqXHR) {

                $.notify('Data saved successfully!', { position: "top center" });

            }

        ).fail(function () {

            $.notify('Error saving data.', { position: "top center" });

        });

    });

});

This is working properly for the most part, but I need to implement this a lot of places, and this adds a lot of code to solve a seemingly fundamental and simple issue. Also, it fails for a county tax rate such as 0.5%, which binds as 50% when using this code as written. Are there are any built-in tricks such as attributes or Razor magic that will cause the data to bind properly without using javascript, or is there a best practice that addresses this problem?