¿Cómo usar UpdatePanels? Explicado para humanos

By | 2010/07/30

Los UpdatePanels son extensiones de AJAX que sirven para realizar operaciones asyncronicamente, es decir que no se neceista hacer un postback de la pagina para realizar alguna funcion.

Hace poco desarrollé una aplicacion de chat en asp.net con C# y necesitaba que los mensajes conforme iban siendo enviados se mostraran en la pantalla, pero no me podia dar el lujo de estar haciendo postback para esto, entonces decidi usar UpdatePanels y me puse a investigar en internet como usarlos, pero todo lo que encontraba parecia escrito en otro idioma. Al final logré entenderlos y ahora se los voy a explicar de forma sencilla.

Los UpdatePanels se conforman de 2 partes principales: ContentTemplate Triggers. Los ContentTemplate es donde van todos los controles que no queremos que hagan postback. Y los Triggers son los controles que queremos que disparen los eventos.

Veamos el codigo .aspx:

Primero que todo necesitamos un ScriptManager:

<asp:ScriptManager ID=”script” runat=”server” EnablePartialRendering=”true”>
</asp:ScriptManager>

Es importante que pongamos el EnablePartialRengering en true.

Agregaremos un boton :

<asp:Button ID=”btn” runat=”server” Text=”Actualizar Adentro” />

Luego agregamos el UpdatePanel:

<asp:UpdatePanel ID=”up” runat=”server” UpdateMode=”Conditional”>

Aquí debemos ponel el UpdateMode en Conditional.

Ahora creamos el ContentTemplate y ponemos los controles que queremos (en este caso pondre solamente un label):

<ContentTemplate>
<fieldset>
<asp:Label ID=”lbl” runat=”server” Text=”Label”></asp:Label>
</fieldset>
</ContentTemplate>

Luego de los controles tenemos que agregar los Triggers (en este caso pondré al boton que agrgamos al principio como un trigger):

<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btn” EventName=”Click” />
</Triggers>

Al ser un botón, el evento que queremos capturar es el click.

Por últimos cerramos el UpdatePanel:

</asp:UpdatePanel>

Para este ejemplo agregaremos dos controles mas, un Label y otro Botón (afuera del UpdatePanel):

<asp:Label ID=”lbl2” runat=”server” Text=”Label”></asp:Label><br />
<asp:Button ID=”btn2” runat=”server” Text=”Actualizar Ambos” />

Ahora veamos el codebehind (.cs):

Lo que queremos hacer en este ejemplo es que al cargarse la página los labels muestren la hora en que fueron cargados, para esto agregamos el siguiente codigo en el Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
lbl.Text = “adentro: ” + DateTime.Now.ToLongTimeString();
lbl2.Text = “afuera: ” + DateTime.Now.ToLongTimeString();
}

Al cargar la página por primera vez los dos labels deberían mostrar la misma hora, pero al hacer click en el botón que dice Actualizar Adentro debería cambiar solamente la hora del Label que pusismos en el UpdatePanel, ya que este boton lo tenemos como un trigger del UpdatePanel. Y al hacer click en el botón que dice Actualizar Ambos los dos deberian tomar nuevamente la hora actual, ya que este boton genera un postback completo de la página.

Espero que esta información les sea útil y si no entienden algo, estoy a sus ordenes para resolver cualquier duda.

Codigo: Aqui

24 thoughts on “¿Cómo usar UpdatePanels? Explicado para humanos

  1. Charly

    Gracias por compartir tus conocimientos 🙂

  2. Sebastián

    Perfecto, he tenido que modificar unos fuentes y había varios de estos, gracias a tu respuesta pude checkear donde estaba el error!

  3. ramses

    diste en el punto es lo q yo buscaba dime lo del chat lo hiciste con un timer o un jquery..?

  4. miguel diaz

    gracias por tu post, nos ayudó muchísimo, solo una pregunta, por qué la primera vez que se ejecuta el trigger si hace postback y ya después lo hace a la perfección.

    Saludos, Gracias

  5. Luis

    muchas gracias por el aporte, llevé 3 horas de investigación y no me funcionaba, leí este aporte y me funcionó a la primera. Saludos

  6. jp

    Estimado
    El fuente ya está disponible.

  7. kmiko

    Muchas gracias por tu ayuda me fue muy util

  8. Nelson Carta

    Hombre: Estoy verdaderamente sorprendido: tu explicación es clara, precisa y didáctica. Me hiciste recordar a Beremis Samir “El Hombre que Calculaba” cuando un sabio, al hacerle una difícil pregunta (la falsa inducción en matemática), le exige un ejemplo “Simple y perfecto”. Tal cual es tu explicación sobre el misterios updatepanel: Simple y perfecto.
    Felicitaciones y muchas gracias.

  9. peter

    muchas gracias, como siempre entiende uno mas en estas paginas que en las de microsoft

  10. Marcelo Verdugo A.

    Estimado, esa es la real inteligencia de explicar algo dificil en tan pocas y simples palabras….muchas gracias!!!

  11. Ariel

    Muy bien explicado. Gracias por compartir.

  12. José Jovel

    Apoyo el comentario de Nelson: Simple y Perfecto

  13. Natalia

    Me encantó con la facilidad que explicaste, pero he intentado descargarme el código y me da error. Podrías volver a cargarlo, por favor!

    Gracias por todo!!

  14. ricardo

    a mas de cuatro años del post… excelente explicacion.

    saludos

  15. Jnxa

    muy buena explicación me sirvio de mucho gracias

  16. Carolina

    Hola, necesito saber si este tipo de control me sirve para el uso de un CALENDAR en asp.

    Mi duda es esta, cada vez que selecciono la fecha en un CALENDAR la pagina vuelve a recargarse y vuelve a la parte superior de la pagina .
    Necesito que cuando yo la busque y la seleccione cada vez que le doy click se quede en la seccion donde estoy llenando los datos, no sé como hacer para que no se recargue y vuelva a la parte superior.
    Eso del update panel me serviría?

  17. Jasson

    Saludos a todos, cómo puedo ir refrescando unos labels, a medida que recorro una lista de checkbox, que fue iniciado por el evento clic de un botón? Es decir, tengo un botón que al presionarlo recorre una lista de checkbox, si esta en visto ejecuta un sub proceso, finalizado este proceso indica el estado en una etiqueta (label). Me gustaría que a medida que va recorriendo cada check box, vaya actualizando la etiqueta asociada al check box, q se vea en tiempo real y no al finalizar el evento clic del botón. Gracias

  18. byron

    hola, necesito ayuda tengo un javascript que me ayuda a modelar un gridview mutinivel :

    function animacion() {
    $(“[id*=imgOrdersShow]”).each(function () {
    if ($(this)[0].src.indexOf(“minus”) != -1) {
    $(this).closest(“tr”).after(“” + $(this).next().html() + “”);
    $(this).next().remove();
    }
    });
    $(“[id*=imgProductsShow]”).each(function () {
    if ($(this)[0].src.indexOf(“minus”) != -1) {
    $(this).closest(“tr”).after(“” + $(this).next().html() + “”);
    $(this).next().remove();
    }
    });
    }

    todo funciona bien pero a la hora de poner dentro de un update panel deja de funcionar favor su ayuda no se que hacer

  19. Ariel

    Excelente artículo, gracias por la sencillez.

  20. Juan José Mendoza

    Muy buen articulo, me sirvio de mucho, gracias

  21. JORGE PAREJA

    Muchas gracias por explicarlo de manera muy sencilla y facil

  22. Angel Hernandez

    gracias por tu aporte, por eso no me gusta leer nada de microsoft, proque realmente como tu dice que lo escriben en otro idioma

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.