jQuery Mask Plugin does not format the number properly

Question

I am working on a MVC4 project, the mask works correctly when saved, but when returning the database data the plugin shows incorrect data if the value ends in 0.

Data example: 99.000,00, when I go to the Edit View: 990,00

I can do a gambiarra to fix this, but as I am using MVC4, I would like to know the correct way to deal with this situation.

View:

    <div class="campo">
        @Html.LabelFor(model => model.ValorPadrao)
        <br />
        @Html.TextBoxFor(model => model.ValorPadrao, new { style = "width:400px", @class ="maskMoeda" })
    </div>

Javascript call:

$('.maskMoeda').mask('999.999.999.999.999,00', { reverse: true })
    .css('text-align', 'right');

Field in the Model:

public decimal? ValorPadrao { get; set; }

Answer 1

I found the solution! I added Stringformat, in the Textboxfor:

<div class="campo">
        @Html.LabelFor(model => model.ValorPadrao)
        <br />
        @Html.TextBoxFor(model => model.ValorPadrao, "{0:F2}", new { style = "width:400px", @class="maskMoeda" })
</div>

And I added these two notes to Model:

[DisplayFormat(DataFormatString = "{0:0,0.00}", ApplyFormatInEditMode = true)]
[DataType(DataType.Currency)]
public decimal? ValorUnitario { get; set; }

Answer 2

There’s a question of mine in which I try to put this mask as an attribute of Model, but to this day I have not arrived at the ideal solution. This answer is the one that comes closest to solving the problem in the most performative way possible, but is not yet 100%. Overall, it is a good way to solve.

Another way, a little easier and simple to do (on the other hand, an answer that can make your code become repetitive) is by putting your code inside the @section scripts, at the end of your View code:

@section scripts {
    <script type="text/javascript">
        $(document).ready(function() {
            $('.maskMoeda').mask('999.999.999.999.999,00', { reverse: true })
                .css('text-align', 'right');
        });
    </script>
}

Very important detail: This solution does not work in Partial Views. Partial Views do not admit @sections. If you really want to use this solution, put the @section in Father View.