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:
Â
-
<asp:UpdatePanel ID="UP" runat="server">
-
<ContentTemplate>
-
<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>
-
<span class="label8">Direccion: </span>
-
</td>
-
<input type="text" id="txtDireccion" class="inputText" />
-
</td>
-
<asp:TextBox runat="server" ID="lblDireccion"/>
-
</td>
-
</tr>
-
<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Ã:
-
      $(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Ã:
-
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.
-
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);
-
 }
)
Recent Comments