abr 18

jQuery, UpdatePanel y Postbacks

.Net, jQuery 1 Comentario »

Esto de jQuery se esta convirtiendo en un vicio (compite mano a mano con Silverlight) y conforme más juegas más quieres y más te diviertes. Y si añadimos UpdatePanels, nos divertimos aún más si cabe.

Al usar jQuery, seguramente usaremos el evento Ready para añadir manejadores de eventos, añadir efectos, añadir / quitar clases.... en fin, inicializar los controles de nuestra página.  El evento Ready de jQuery  es un evento que se lanza una vez que todo el DOM de la página ha sido cargado por completo. Por otro lado tenemos los postback parciales provocados por los updatePanels. El cometido de estos controles es evitar la carga completa de la página, es decir, solo actualizar aquellos controles contenidos en el control UpdatePanel. Pero lo que hace realmente no es actualizar los valores de los controles, sino que los sustituye  por otros nuevos, tras lo cual todos los controles que hay en el UpdatePanel perderán las clases y eventos asociados a ellos en la inicialización de la página. Esto incluye tanto controles de servidor como controles de cliente, todos serán reemplazados.

Por ejemplo tomemos como ejemplo este UpdatePanel y controles:

Â

PLAIN TEXT
HTML:
  1. <asp:UpdatePanel ID="UP" runat="server">
  2.         <ContentTemplate>
  3.             <table>
  4.                 <tr>
  5.                     <td width="40px">
  6.                         <span class="label8">Nombre: </span>
  7.                     </td>
  8.                     <td width="40px">
  9.                         <input type="text" id="txtnombre" class="inputText" />
  10.                     </td>
  11.                     <td width="80px">
  12.                         <asp:TextBox runat="server" ID="lblNombre"/>
  13.                     </td>
  14.                 </tr>
  15.                 <tr>
  16.                     <td>
  17.                         <span class="label8">Direccion: </span>
  18.                     </td>
  19.                     <td>
  20.                         <input type="text" id="txtDireccion" class="inputText" />
  21.                     </td>
  22.                     <td>
  23.                         <asp:TextBox runat="server" ID="lblDireccion"/>
  24.                     </td>
  25.                 </tr>
  26.                 <tr>
  27.                     <td>
  28.                         <asp:Button runat="server" ID="btnAceptar" Text="Aceptar"
  29.                             CssClass="btnMandatory" onclick="btnAceptar_Click"/>
  30.                     </td>
  31.                 </tr>
  32.             </table>
  33.         </ContentTemplate>
  34.    </asp:UpdatePanel>

 La inicialización de la página la llevaríamos a cabo normalmente así:

PLAIN TEXT
JavaScript:
  1.        $(document).ready(function () {
  2.             // Inicializacion de controles
  3.  
  4.        });

De esta manerá todo funciona correctamente, pero solo mientras no pulsemos el botón "Aceptar" que provoca el postpack parcial. Una vez hagamos click, todos los eventos asociados a los controles desaparecerán. Para solucionarlo tenemos que reasignarlos nuevamente, y una forma de hacerlo es añadiendo un manejador al evento que controla cuando un postback asíncrono ha finalizado. Nuestro código podría quedar así:

PLAIN TEXT
JavaScript:
  1. Sys.WebForms.PageRequestManager.getInstance().add_endRequest(Load);
  2.  
  3.         $(document).ready(function () {
  4.             Load();
  5.         });
  6.  
  7.         function Load() {
  8.             $('#' + '<%=btnAceptar.ClientID %>').attr('disabled', true);
  9.             $('#' + '<%=lblNombre.ClientID %>').attr('readonly', true);
  10.             $('#' + '<%=lblDireccion.ClientID %>').attr('readonly', true);
  11.  
  12.             $(".inputText").blur(function () {
  13.                 $(this).css("background-color", "FFFFFF");
  14.             });
  15.  
  16.             $(".inputText").focus(function () {
  17.                 $(this).css("background-color", "CCCCCC");
  18.             });
  19.  
  20.             $(".inputText").keyup(function () {
  21.  
  22.  
  23.                 if ($(this).val() == '')
  24.                     $('#' + '<%=btnAceptar.ClientID %>').attr('disabled', true);
  25.                 else {
  26.                     var nodata = false;
  27.                     $.each($(".inputText"), function () {
  28.                         if ($(this).val() == '')
  29.                             nodata = true;
  30.                     });
  31.                     $('#' + '<%=btnAceptar.ClientID %>').attr('disabled', nodata);
  32.                 }
  33.  
  34.             });
  35.  
  36.             $('#' + '<%=btnAceptar.ClientID %>').click(function () {
  37.                 $('#' + '<%=lblNombre.ClientID %>').attr('value', $("#txtnombre").val());
  38.                 $('#' + '<%=lblDireccion.ClientID %>').attr('value', $("#txtDireccion").val());               
  39.             });
  40.         } 

Lo que hemos hecho es envolver todo el código que teníamos en el evento Ready de jQuery en una función, y llamar a esta función tanto en el evento Ready, como cuando el postback asincrono del updatePanel ha terminado.

Una segunda opción sería Inyectar un script desde servidor que invoque a esta nueva función.

PLAIN TEXT
C#:
  1. protected void btnAceptar_Click(object sender, EventArgs e)
  2.  {
  3.         lblNombre.Text = lblNombre.Text + "--&gt; Validado con Exito";
  4.         lblDireccion.Text = lblDireccion.Text + "--&gt; Validado con Exito";
  5.         ScriptManager.RegisterStartupScript(this, GetType(), "", "Load();", true);
  6.  }

ene 17

Arquitectura en Cliente con Javascript

.Net, Web Sin comentarios »

La mayoría de las veces cuando se define la arquitectura de una aplicación web solo se tiene en cuenta la parte servidor, como si el lado cliente no fuera importante o no existiera. Es verdad que en cliente disponemos de un lenguaje interpretado (no compilado), lo cual hace si cabe un poquito mas complicado el desarrollo,  al no disponer de las ventajas del pre compilado que nos ofrece Visual Studio. Además,  el ordenado del código debería ser un factor importante, ya que la tendencia es tener  un único fichero o script de código Javascritp, y esto siempre  comienza siendo unas pocas líneas para unas cuantas validaciones y va creciendo paulatinamente debido a la no planificación de la arquitectura en cliente o a nuevos requerimientos.

Atajar esto no es fácil, y el artículo no define ningún modelo de arquitectura, pero si unas cuantas pautas de buena conducta que nos ayuden a tener un condigo algo mas limpio y ordenado.

Leer el artículo completo »

dic 13

Mantener Posición del Scroll después de un postback asíncrono

.Net, General 1 Comentario »

Que divertido es Javascript, y como echaba de menos un proyecto como el de ahora, casi todo en cliente, pero a pelo sin esas maravillosas facilidades que aporta Silverlight...., bueno algunas si, haciendo uso de Framework de AJAX de Microsot. El contenido de este Post es el típico conocimiento que en mi caso nunca me acuerdo y tengo que echar manos de algun proyecto para recuperarlo. Nunca Mais :)

PLAIN TEXT
JAVASCRIPT:
  1. var xPos, yPos;
  2. var prm = Sys.WebForms.PageRequestManager.getInstance();
  3. prm.add_beginRequest(BeginRequestHandler_scroll);
  4. prm.add_endRequest(EndRequestHandler_scroll);
  5.  
  6. function BeginRequestHandler_scroll(sender, args) {
  7.  if (document.getElementById('gridClientScroll')) {
  8.         var item = document.getElementById('gridClientScroll');
  9.  
  10.         xPos = item.scrollLeft;
  11.         yPos = item.scrollTop;
  12.     }
  13. }
  14. function EndRequestHandler_scroll(sender, args) {
  15.  
  16.     if (document.getElementById('gridClientScroll')) {
  17.         var item = document.getElementById('gridClientScroll');
  18.  
  19.         item.scrollLeft = xPos;
  20.         item.scrollTop = yPos;
  21.     }
  22. }

El código creo que no necesita explicación. Simplemente obtenemos los valores X e Y de elemento con Scroll que queremos persistir después del postback y lo guardamos, para posteriormente, volverlos a establecer. Para ello,   añadimos un manejador de eventos para antes y después del postback asíncrono, de manera que cada uno de ellos ejecute la función que le especificamos.

oct 08

Desabilitar Validador ASP.Net desde Javascript

.Net Sin comentarios »

Si alguna vez necesitamos desactivar un control 'Validator' desde Javascript, solo necesitamos conocer el nombre del validador en cliente, y llamar a la funcion ValidatorEnable de la siguiente forma:

PLAIN TEXT
JAVASCRIPT:
  1. function DesactivarValidador()
  2. {
  3. var control= document.getElementById('Validator.ClientID');
  4. ValidatorEnable(control, false);
  5. }

Comprobado desde la version 1.1 en adelante.

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Acceder

Switch to our mobile site