usando ASP.NET AJAX, pero no abusando

Hace unos días en el WebCast de AJAX y su integración con las plataformas de desarrollo, dada por Guillermo Morales, por cierto pueden descargar la PPT desde este enlace, probado a la fecha de hoy :).

Como les decía en el WebCast, menciono algo muy importante, y es que si bien agregando un control UpdatePanel, y colocando controles como GridView y todos los que deseemos, automáticamente usarán post asíncronos, AJAX, para actualizar su información, se actualizará todo lo que este dentro del UpdatePanel. Y lo dijo, y que es lo importante, es que no debemos poner todo el contenido de la página dentro del UpdatePanel, sólo los controles y el contenido que serán actualizados. Si vamos a colocar todo la página, o la mayor parte de ella, de todas maneras se estará enviando ese contenido aunque no se haga postback, se incrementará la cantidad de datos enviados a través de los postback asíncronos. 

Y aunque, sin postbacks, tengamos una mejor experiencia de usuario, el exceso de contenido viajando, puede demorar el refresco del UpdatePanel.  Recuerden que para estos casos, siempres es necesario colocar algún tipo de indicador que le de alguna señal al usuario que su proceso ha sido iniciado, en un anterior post, ya hemos comentando como hacer esto.

Veamos un ejemplo, y como podemos explotar el control UpdatePanel, para sólo enviar los controles que serán actualizados:

  1. Tenemos la siguiente estructura:
  2. En la cuál por cada Area tenemos determinados Tags, al ejecutar esa página y con su postback normal que refresca todo el contenido total de la página es el siguiente:
  3. Ahora agregamos un control ScriptManager, y un control UpdatePanel. Pero sólo colocamos dentro del control UpdatePanel los contenidos que serán actualizados en los postback asíncronos. El DropDownList no será actualizado, sólo el control con la lista de tags:
  4. La definición dice que todo lo que este contenido dentro del UpdatePanel será actualizado en los postback asíncronos. Si ejecutamos la aplicación en este punto, podrán apreciar que aún existe postback por parte del control DrowDownList. -entonces debemos colocarlo dentro del UpdatePanel, -no.
  5. Lo que haremos es lo siguiente, seleccionamos el control UpdatePanel, nos vamos a la ventana de propiedades, y seleccionamos el botón de la propiedad Triggers:
  6. Agregamos un nuevo trigger, AsyncPostBackTrigger:
  7. Como control seleccionamos a nuestro DropDownList, en evento seleccionamos a SelectedIndexChanged, y hacemos clic en Ok:
  8. Ahora ejecutamos, y podremos ver como carga nuestro control de Tags, sin refrescar la página completa, sólo lo que esta dentro del UpdatePanel, lamentablemente en la imagen no se puede ver “el no refresco de la página”, pero confíen en mi palabra :), funciona!:

Saludos,

Post cruzado

20 comentarios sobre “usando ASP.NET AJAX, pero no abusando”

  1. Este artículo está perfecto, era justo lo que buscaba. No encontraba el modo de actualizar con un dropdownlist. Que potencia la de AJAX! espero que esta página me ayude a dominarlo. Gracias!

  2. He probado el ejemplo, y me aparece un mensaje de error cuando lo ejecuto en mi server, pero cuando ejecuto en el vs 2005, funciona normal, el mensaje de error es este:

    Parser Error Message: The file ‘/MasterPage.master’ does not exist.

    Porfavor HEEEEEEEEEEEEEEEEEELP

    GRACIAS.

  3. Buenas,

    Para la master page he encontrado el problema (le añade un prefijo al control, algo así como ctl000_, lo mismo pasaría si lo usas dentro de un user control).

    … Solución, bueno, picar tu el ctl_000 es peligroso, pero si puede pillar ClientID del control en servidor, un hack que haría funcionar tu código sería utilizar ResponseWrite para obtener los ID’s de los controles, hacer algo así como:

    if (postBackElement.id == ‘< %Response.Write(ddlarea.ClientID.ToString());%>‘)
    {
    $get(‘< %Response.Write(UpdateProgress1.ClientID.ToString());%>‘).style.display = “block”;
    }
    (…)

  4. Hola pues eh ejecutado el programa y todo bien , pero me marca un error en la barra de estado diciendo que Sys no definido , me podrian decir que onda con eso gracias

  5. Braulio es decir que estabas usando un trigger entre un contentPage de la página aspx, y el contentPage de la página maestra?

    Adrian, debe haber un error por ahi que esta pasando desapercibido, no debería salir eso.

    Hola Espinete, he tratado de no tener ese escenario que mencionas. De que un control de usuario habrá otro popup, pero a la vez ese control de usuario sea un popup. Lo que hago es cambiar de popup, pero trato de no poner popups en los controles de usuario.

    Saludos,

  6. Hola Amigo tengo este problema, tengo una aspx, ahi tengo 3 usercontrol que contienen Ajax UpDatePanel, elproblema es que cuando ejecuto una funcion dentro de un Usercontrol en el Aspx. entra otra vez al postback como si fuera la primera vez, de que manera puedo controlas los postback es decir cuando es primera vez con Ajax..te agradece tu ayuda..

  7. Este articulo es muy bueno solo quisiera consultar un problema que a mi se me presento, agrege un UpdatePanel y todo parece funcionar bien pero en el MasterPage tengo un label en donde mando los mensajes de error y cuando meti el update no me presenta o actualiza el mensaje que envio al MasterPage me podria decir como acceder al metodo para actualizar ese control desde el MasterPage

    Gracias y Saludos

  8. saludo a todos , yo deseo hacer postback de una pagina hija a otra padre PERO sin necesidad de que la pagina se actualize externamente, (que se recarge internamente, asi cuando se usa el UPDATEPANEL) para que no pierda la posicion donde se hizo la llamada a la pagina hija.

    help me , please

    Saludos

  9. Hola Braulio,
    Pudiste resolver tu problema?

    A mi me pasa lo mismo.

    Tengo un ModalPopupExtender, y adentro un UserControl con cierto contenido. Tengo un boton en el UserControl, pero al presionarlo no hace postback! Si uso el contenido directamente en el panel sin pasar por el UserControl, funciona….

    Saludos
    Patricio
    pmosse “at” cubika.com

  10. no se si alguien lo dijo, pero este Guillermo Morales le pifio en algo…

    los postback asi sean asincronos, no son callbacks, sino que siguen siendo postbacks

    si uno se fija bien en la info que corre entre el cliente y el servidor, TODA LA PAGINA VIAJA AL SERVIDOR Y TODA LA PAGINA VUELVE AL CLIENTE

    el scriptmanager se encarga de determinar que parte de la pagina hay que actualizar…

    no es mas lento el viaje al servidor incluir mucho o poco en un updatepanel!!!!

    PARECE mas lento porque el scriptmanager tarda mas en redibujar la pagina del lado cliente, nada mas

  11. hola amigo tu tuto esta muy bien pero yo lo eh intentado hacerlo pero con un dropdownlist pero cuando en mi primer dropdownlist selecciono un item por primera ves se actualizar el segundo dropdownlist pero cuando comienzo a selecciona otro y luego otro mas el segundo dropdownlist que esta en updatepanel no se actualiza rapidamente a que se debe esto. gracias por la ayuda

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *