none
Javascript no funciona dentro de @using (Html.BeginForm("", "", FormMethod.Post)) RRS feed

  • Pregunta

  • Hola amigos, tengo una vista en la cual dentro de ella agrego javascript para hacer calculos matematicos, hasta ahi todo funciona bien, el problema surge a partir de que utilizo  un @using (html.beginform)... y este javascript deja de funcionar, alguien sabe el porque? espero puedan ayudarme, dejo mi html adjunto, gracias.

                   @*el Hmtl fuera del using trabaja bien, pero cuando está dentro de el no hace los calculos*@
    
                    @using (Html.BeginForm("InsertarRemuneracion", "Remuneracion", FormMethod.Post))
                    {
                        <h5><strong>INGRESOS Y RETENCIONES DEL TRABAJADOR</strong></h5>
                        <input id="IdPersona2" name="Idpersona" hidden type="text" value="txtIdPersona" />
                        <div class="form-group">
                            <div class="col-md-3">
                                Asignación Familiar
                                <select id="AsigFamiliar" name="AsigFamiliar" class="form-control AsigFamiliar" onchange="AsignacionFam(); Retenciones(); SueldoNeto(); SeguroSalud()">
                                    <option selected disabled="disabled">Seleccione</option>
                                    <option value="930">Si</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                Asignación Familiar S/.
                                <input id="AsigFam" name="txtAsigFam" class="form-control" placeholder="S/." disabled type="text" onkeyup="AsignacionFam()">
                            </div>
                            <div class="col-md-3">
                                Otros S/.
                                <div class="input-group">
                                    <input type="text" id="Otros" name="txtOtros" placeholder="S/." disabled class="form-control" onkeyup="IngresoBruto(); SueldoNeto()">
                                    <span class="input-group-addon">
                                        <input type="checkbox" onclick="InhabilitaOtros(this); IngresoBruto(); SueldoNeto()">
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                Ingreso Bruto S/.
                                <input id="IngresoB" name="txtRB" readonly class="form-control" type="text" placeholder="S/." onkeyup="Retenciones()">
                            </div>
                            <div class="col-md-3">
                                Retención Obligatoria S/.
                                <input id="RetencionXAporte" name="txtAporteOblig" class="form-control" type="text" placeholder="S/." readonly>
                            </div>
                            <div class="col-md-3">
                                Ingreso Neto S/.
                                <input id="IngresoN" name="txtRN" class="form-control" type="text" placeholder="S/." readonly>
                            </div>
                        </div><hr />
                        @*APORTACIONES DEL EMPLEADOR*@
                        <h5><strong>APORTACIONES DEL EMPLEADOR</strong></h5>
                        <div class="form-group">
                            <div class="col-md-3">
                                ESSalud S/.
                                <input id="ESSalud" name="txtEssalud" class="form-control" type="text" readonly placeholder="S/.">
                            </div>
                            <div class="col-md-3">
                                SCTR
                                <select id="SeguroAdic" name="cboSCTR" class="form-control" onchange="SeguroSCTR(); AporteTotal()">
                                    <option selected disabled="disabled">Seleccione</option>
                                    <option value="1.25">Si</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                SCTR S/.
                                <input type="text" id="SCTR" name="txtSCTR" readonly placeholder="S/." class="form-control" onkeyup="SeguroSCTR()">
                            </div>
                            <div class="col-md-3">
                                Aporte Total S/.
                                <input id="AporteEmpleador" name="txtAporteTotal" class="form-control" type="text" readonly placeholder="S/.">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-3">
                                <button type="button" class="btn btn-primary">Guardar</button>
                            </div>
                        </div>
                    }
                </fieldset>
            </form>
        </div>
    </div>
    
    @section scripts {
    
        <script type="text/javascript">
            function AsignacionFam() {
                caja = document.forms["sumar"].elements;
                var Asignacion = Number(caja["AsigFamiliar"].value);
                var PorcentajeAF = 0.10;
                var SueldoB = Number(caja["Sueldo"].value);
    
                Resultado = (Asignacion * PorcentajeAF);
                caja["AsigFam"].value = (Resultado);
    
                if (!isNaN(Resultado)) {
                    var MontoTotal = Resultado + SueldoB;
                    caja["IngresoB"].value = (MontoTotal);
                }
            }
        </script>
    
        <script type="text/javascript">
            function InhabilitaOtros(chk) {
    
                obj = chk.form;
                if (chk.checked) {
                    obj.Otros.disabled = false;
                    obj.Otros.value = "";
                    document.getElementById("Otros").focus();
                } else {
                    obj.Otros.value = 0;
                    obj.Otros.disabled = true;
                }
            }
    
            function IngresoBruto() {
                caja = document.forms["sumar"].elements;
                var Sueldo = Number(caja["Sueldo"].value);
                var Asignacion = Number(caja["AsigFam"].value);
                var Otros = Number(caja["Otros"].value);
    
                Resultado = (Sueldo + Asignacion + Otros);
                caja["IngresoB"].value = (Resultado);
    
                if (!isNaN(Resultado)) {
                    var MontoTotal = Sueldo + Asignacion + Otros;
                    caja["IngresoB"].value = (MontoTotal);
                }
            }
    
            $(document).ready(function () {
                $("#Sueldo").append(function () {
                    var value = $(this).val();
                    $("#IngresoB").val(value);
                });
            });
    
            function Retenciones() {
                caja = document.forms["sumar"].elements;
                var Sueldo = Number(caja["Sueldo"].value);
                var Asignacion = Number(caja["AsigFam"].value);
                var AporteOb = 0.14;
    
                Resultado = (Sueldo + Asignacion) * AporteOb;
                caja["RetencionXAporte"].value = Math.round(Resultado);
            }
    
            function SueldoNeto() {
                caja = document.forms["sumar"].elements;
                var Sueldo = Number(caja["IngresoB"].value);
                var RetencionXAporte = Number(caja["RetencionXAporte"].value);
    
                Resultado = Sueldo - RetencionXAporte;
                caja["IngresoN"].value = Resultado;
    
                if (!isNaN(Resultado)) {
                    var SueldoN = Sueldo - RetencionXAporte;;
                    caja["IngresoN"].value = (SueldoN);
                }
            }
        </script>
    
        <script type="text/javascript">
            function SeguroSalud() {
                caja = document.forms["sumar"].elements;
    
                var Sueldo = Number(caja["Sueldo"].value);
                var Asignacion = Number(caja["AsigFam"].value);
                var PorcentajeAF = 0.09;
    
                Resultado = (Sueldo + Asignacion) * PorcentajeAF;
                caja["ESSalud"].value = (Resultado);
            }
        </script>
    
        <script type="text/javascript">
            function SeguroSCTR() {
                caja = document.forms["sumar"].elements;
    
                var Sueldo = Number(caja["Sueldo"].value);
                var Asignacion = Number(caja["AsigFam"].value);
                var Porcentaje = Number(caja["SeguroAdic"].value);
                var PorcentajeSCTR = Porcentaje / 100;
    
                Resultado = (Sueldo + Asignacion) * PorcentajeSCTR;
                caja["SCTR"].value = Math.round(Resultado);
    
                if (!isNaN(Resultado)) {
                    var MontoTotal = (Resultado);
                    caja["SCTR"].value = Math.round(MontoTotal);
                }
            }
        </script>
        <script type="text/javascript">
            function AporteTotal() {
                caja = document.forms["sumar"].elements;
    
                var ESSalud = Number(caja["ESSalud"].value);
                var SCTR = Number(caja["SCTR"].value);
    
                Resultado = ESSalud + SCTR;
                caja["AporteEmpleador"].value = (Resultado);
            }
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#IdPersona1").append(function () {
                    var value = $(this).val();
                    $("#IdPersona2").val(value);
                });
            });
        </script>
    }



    Juan Fernando

    miércoles, 28 de marzo de 2018 18:21

Todas las respuestas

  • Pues yo no veo ningún JS que esté dentro del using(Html.BeginForm()).  Tendrá que ser más específico y señalar explícitamente qué secciones del JS que presenta FUERA del using no está trabajando.  Puede editar su pregunta y marcar el código en cuestión en negrita, por ejemplo.

    Jose R. MCP
    Code Samples

    miércoles, 28 de marzo de 2018 19:47
  • Está claro, no me refiero al Js dentro del using, a lo que quiero llegar es que cuando coloco el HTML dentro del using deja de funcionar el Js, eso fue lo que especifiqué en mi consulta como dice en el comentario del código:

    Es decir lo que me refiero es que el HTML fuera del using los Js trabaja bien realizando los cálculos, pero cuando este mismo HTML está dentro del using los JS no hace los cálculos. gracias.


    Juan Fernando

    miércoles, 28 de marzo de 2018 20:08
  • Veo mucho código JS que NO utiliza jQuery.  Ya que tiene jQuery, la selección de elementos se simplifica mucho.  En cuanto a su problema, imagino que está en el hecho de que usted basa la búsqueda de sus controles en un elemento <form> con nombre "sumar", pero no creo que Html.BeginForm() esté colocándole ese nombre.  Por lo tanto, las funciones que dependen de ubicar controles usando este método pues fallan y por lo tanto el cálculo también.

    Jose R. MCP
    Code Samples

    miércoles, 28 de marzo de 2018 22:18
  • Veo mucho código JS que NO utiliza jQuery.  Ya que tiene jQuery, la selección de elementos se simplifica mucho.  En cuanto a su problema, imagino que está en el hecho de que usted basa la búsqueda de sus controles en un elemento <form> con nombre "sumar", pero no creo que Html.BeginForm() esté colocándole ese nombre.  Por lo tanto, las funciones que dependen de ubicar controles usando este método pues fallan y por lo tanto el cálculo también.

    Jose R. MCP
    Code Samples

    Hola WebJose, y como podría hacer ello para solucionar mi problema? te estaría muy agradecido de poder apoyarme... :D

    Juan Fernando

    jueves, 29 de marzo de 2018 7:38
  • Pues podría forzar el nombre del formulario con:

    @using (Html.BeginForm("InsertarRemuneracion", "Remuneracion", FormMethod.Post, new { name = "sumar", id = "sumar"))

    También agregué id por si acaso.

    La opción más versátil, si es que se anima a aprender y si es que no hay más que un <form> en su página, es usar jQuery para seleccionar los elementos.

    //Para seleccionar el formulario:
    var elForm = $('form');
    
    //Para seleccionar un elemento dentro del formulario cuyo name es Sueldo:
    var sueldo = $('[name="Sueldo"]', elForm);
    //Su valor es:
    var valor = sueldo.val();
    
    //O nos olvidamos del formulario y seleccionamos inmediato:
    var sueldo = $('form [name="Sueldo"]');
    
    //Etc.  Hay varios selectores que pueden usarse.  jQuery es genial.
    var sueldo = $('form input[name="Sueldo"]');

    Ah, y para asignar un valor con jQuery:

    sueldo.val(<la variable con el valor aquí>);


    Jose R. MCP
    Code Samples

    jueves, 29 de marzo de 2018 17:41