jQuery, UpdatePanel y Postbacks

abr 18

jQuery, UpdatePanel y Postbacks

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:

<asp:UpdatePanel ID="UP" runat="server">
<ContentTemplate>
<table>
<tr>
<td width="40px">
<span class="label8">Nombre: </span>
</td>
<td width="40px">
<input type="text" id="txtnombre" class="inputText" />
</td>
<td width="80px">
<asp:TextBox runat="server" ID="lblNombre"/>
</td>
</tr>
<tr>
<td>
<span class="label8">Direccion: </span>
</td>
<td>
<input type="text" id="txtDireccion" class="inputText" />
</td>
<td>
<asp:TextBox runat="server" ID="lblDireccion"/>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btnAceptar" Text="Aceptar"
CssClass="btnMandatory" onclick="btnAceptar_Click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

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

PLAIN TEXT

JavaScript:

$(document).ready(function () {
// Inicializacion de controles
});

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:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(Load);
$(document).ready(function () {
Load();
});
function Load() {
$('#' + '<%=btnAceptar.ClientID %>').attr('disabled', true);
$('#' + '<%=lblNombre.ClientID %>').attr('readonly', true);
$('#' + '<%=lblDireccion.ClientID %>').attr('readonly', true);
$(".inputText").blur(function () {
$(this).css("background-color", "FFFFFF");
});
$(".inputText").focus(function () {
$(this).css("background-color", "CCCCCC");
});
$(".inputText").keyup(function () {
if ($(this).val() == '')
$('#' + '<%=btnAceptar.ClientID %>').attr('disabled', true);
else {
var nodata = false;
$.each($(".inputText"), function () {
if ($(this).val() == '')
nodata = true;
});
$('#' + '<%=btnAceptar.ClientID %>').attr('disabled', nodata);
}
});
$('#' + '<%=btnAceptar.ClientID %>').click(function () {
$('#' + '<%=lblNombre.ClientID %>').attr('value', $("#txtnombre").val());
$('#' + '<%=lblDireccion.ClientID %>').attr('value', $("#txtDireccion").val());
});
}

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#:

protected void btnAceptar_Click(object sender, EventArgs e)
{
lblNombre.Text = lblNombre.Text + "--> Validado con Exito";
lblDireccion.Text = lblDireccion.Text + "--> Validado con Exito";
ScriptManager.RegisterStartupScript(this, GetType(), "", "Load();", true);
}

5 Responses to “jQuery, UpdatePanel y Postbacks”

andres Says:
septiembre 10th, 2010 at 17:54
Super… muchas gracias me salvo de una muy grande y me ayudo a comprender mejor el codigo…..
Cristina H Says:
marzo 17th, 2011 at 11:22
Con la versión 1.4.4 más sencillo utilizar el método .live() http://api.jquery.com/live/
Oscar Alvarado Says:
junio 3rd, 2011 at 20:13
Hola Jose Almoguera, tengo un problema con jquery y asp respecto a los postback de un updatepanel, te expongo mi problema:
Resulta que tengo un menu en jquery con animacion con enlaces de tipo linkbutton en una master con un ContentPlaceHolder en el que carga un texto, lo q pasa es que cuando le doy al boton en el menu jquery se actualiza toda la pagina y los estados q tiene el menu no se muestran, como puedo solucionar esto, el ContentPlaceHolder esta dentro de un updatepanel, haber si me hechas una mano y me das una idea. gracias!
admin Says:
junio 7th, 2011 at 11:32
Hola creo que el problema lo tienes en el control Linkbutton de la Master Page, ya que al hacer click realizar un redirect hacia una pagina, es decir un postback, un reset completo de la pagina. Para poder controlar eso creo que no te queda mas remedio que reestrablecer el estado de tus objetos en cliente (jquery). Ten en cuenta que todo lo que sea postback (ya sea con UpdatePanel o sin el) implica una recreacion del html de la pagina, por lo que debes forzar su reinicio.
KennyQuevedo Says:
diciembre 19th, 2011 at 0:53
He incluido el codigo para solucionar el problema de perder la funcionalidad del jquery luego de un postback asincrono, pero al momento de cargar la pagina, al cargar por primera vez me sale el mensaje de error Sys no esta definido. He probado con algunas referencias en el web.config, algunas propiedades del toolkitscriptmanager pero me sigue saliendo… como has evitado este problema ?
estoy utlizando Framework 4.0 asp.net

albloguera