Doubt with using jquery.maskMoney with Asp.net mvc

Question

I’m using it to form a value , but it’s not working, I have my partial view, this way:

_Formularypossibility.cshtml

@model Generico.Dominio.TB_POSSIBILIDADE

<script type="text/javascript">
    $(document).ready(function () {
        $("VALORAPOSTA1").maskMoney();
    });
</script>



@using (Html.BeginForm("GravarRegistro", "Possibilidade", FormMethod.Post))
{
    <div class="container">
        <div class="col-md-3 form-group">
            @Html.HiddenFor(c => Model.IDPOSSIBILIDADE)
            @Html.DisplayFor(c => Model.DESCRICAO01) | R$ @Html.DisplayFor(c => Model.VALOR01)
            @Html.TextBoxFor(c => Model.VALORAPOSTA1, new { placeholder = "0", @class = "form-control", type= "number" })
        </div>

        <div class="col-md-3 form-group">
            @Html.DisplayFor(c => Model.DESCRICAO02) | R$ @Html.DisplayFor(c => Model.VALOR02)
            @Html.TextBoxFor(c => Model.VALORAPOSTA2, new { placeholder = "0", @class = "form-control", type = "number" })
        </div>

        <div class="col-md-3 form-group">
            @Html.DisplayFor(c => Model.DESCRICAO03) | R$ @Html.DisplayFor(c => Model.VALOR03)
            @Html.TextBoxFor(c => Model.VALORAPOSTA3, new { placeholder = "0", @class = "form-control", type = "number" })
        </div>

    </div>
}

I removed Jquery from Partial, added on the page: the generated html looks like this:

    <script type="text/javascript">
    $(document).ready(function () {
        $("#VALORAPOSTA1").maskMoney();
    });
</script>




<form action="/Possibilidade/GravarRegistro" method="post">    <div class="container">
        <div class="col-md-3 form-group">
            <input data-val="true" data-val-number="The field Controle Jogo: must be a number." data-val-required="O campo Controle Jogo: é obrigatório." id="IDPOSSIBILIDADE" name="IDPOSSIBILIDADE" type="hidden" value="1" />
            Casa | R$ 01,73
            <input class="form-control" data-val="true" data-val-number="The field VALORAPOSTA1 must be a number." data-val-required="O campo VALORAPOSTA1 é obrigatório." id="VALORAPOSTA1" name="VALORAPOSTA1" placeholder="0" type="number" value="0" />
        </div>

        <div class="col-md-3 form-group">
            Empate | R$ 03,60
            <input class="form-control" data-val="true" data-val-number="The field VALORAPOSTA2 must be a number." data-val-required="O campo VALORAPOSTA2 é obrigatório." id="VALORAPOSTA2" name="VALORAPOSTA2" placeholder="0" type="number" value="0" />
        </div>

        <div class="col-md-3 form-group">
            Fora | R$ 04,20
            <input class="form-control" data-val="true" data-val-number="The field VALORAPOSTA3 must be a number." data-val-required="O campo VALORAPOSTA3 é obrigatório." id="VALORAPOSTA3" name="VALORAPOSTA3" placeholder="0" type="number" value="0" />
        </div>

    </div>
    <div class="modal-footer">

        <div class="span6">
            <button type="submit" name="btnEnviar" id="btnEnviar" class="btn btn-sm btn-primary">Gravar no caixa</button>
        </div>
        <br />
        <div class="span6">
            <button type="reset" name="btnLimpar" id="btnLimpar" class="btn btn-sm btn-danger">Limpar Formulário</button>
        </div>

        <br />
        <div class="span6">
            <a href="/Caixa" class="btn btn-sm btn-success ">
                Visulizar o Caixa
            </a>
        </div>



    </div>
</form>

Answer 1

your selector is wrong:

$("#VALORAPOSTA1").maskMoney();

Answer 2

Next to work your input cannot be of the type Number, you can change it in Razor in the attributes ponde @type="text".

In the code below I show an example of the working use, I input the class: "maskmoney" and in the selector of Jquery I used $(".maskmoney") this facilitates when more than one element needs Mascara..

 $(document).ready(function () {
   
   $('.maskmoney').maskMoney({ decimal: ',', thousands: '.', allowZero: true });
   
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<input type="text" class="maskmoney">