none
Duda JQuery, <asp:Button> e <input type="button"/> RRS feed

  • Pregunta

  • Hola a todos. Estaba programando una barra de progreso que actualizara su valor pulsando un botón.

    Lo que me sorprendió fue que si utilizaba dentro del formulario del body un <input type="button" /> la página recordaba el valor val al llamar a la click(function()), pero si utilizaba un <asp:Button> val siempre tomará el valor cero menos en el preciso momento en que es presionado el botón.

    <script>
         $(document).ready(function () {
              var val = 0;
              $('#boton').click(function () {
                   val = Number(Math.floor(Math.random() * 100 + 1));
                   $("#porcentaje").text(val + '%');
                   $('#progressBar div').css("width", val.toString() + "%");
              });
         });
    </script>
    
    <div id="progressBar">
         <div></div>
    </div>
         <div id="porcentaje">
    </div>
    <!--<asp:Button runat="server" ID="boton" Text="Start" />--><input type="button" id="boton" value="Start" />

    Por qué hay esa diferencia de comportamiento? A qué se debe?

    Un saludo.

    martes, 28 de julio de 2015 12:51

Respuestas

  • Hola, buenas.

    El comportamiento es debido a que el <asp:Button> ejecuta código en el servidor. Al hacer la recarga de la página el valor de val se seteará siempre a 0. En cambio, si defines el botón como un input, éste se ejecutará en cliente siempre, sin realizar una recargade la página, con lo que las variables definidas en la misma mantendrán su valor.

    Un saludo.


    When an answer is helpful, please vote as helpful, propose as answer and/or mark as answer



    • Marcado como respuesta Maco110 martes, 28 de julio de 2015 13:03
    • Editado ohawari martes, 28 de julio de 2015 13:03
    martes, 28 de julio de 2015 13:02

Todas las respuestas

  • Hola, buenas.

    El comportamiento es debido a que el <asp:Button> ejecuta código en el servidor. Al hacer la recarga de la página el valor de val se seteará siempre a 0. En cambio, si defines el botón como un input, éste se ejecutará en cliente siempre, sin realizar una recargade la página, con lo que las variables definidas en la misma mantendrán su valor.

    Un saludo.


    When an answer is helpful, please vote as helpful, propose as answer and/or mark as answer



    • Marcado como respuesta Maco110 martes, 28 de julio de 2015 13:03
    • Editado ohawari martes, 28 de julio de 2015 13:03
    martes, 28 de julio de 2015 13:02
  • hola

    pero cuando presionas el boton de asp.net no notas que la pagina se refresca ?esto es porque se realiza un post al servidor

    este deberias anularlo, pudiendo usar

    <asp:Button runat="server" ID="boton" Text="Start" OnClientClick="return false;" />

    entonces e javascript seria

     $('#<%=boton.ClientID%>').click(function () {..

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 28 de julio de 2015 13:14