RSS

ASP.NET AJAX uso del UpdatePanel

jueves 14 de diciembre de 2006

Una de las utilidades de ASP.NET AJAX es el UpdatePanel, este nos permite refrescar solo la porción de la página que nos interesa.

Vamos a ver el problema que nos resuelve en un ejemplo para que quede mas claro.

Explicación del problema

Supongamos que tenemos una página de carga de datos, en la cual tenemos varios controles (textbox, dropdwonlist, etc.), normalmente estos controles requieren algún tipo de validación o la carga de uno en base al dato seleccionado en otro, ejemplo típico la selección de (Pais, Provincia). En este caso no queremos que cada vez que se cambie un país se tenga que refrescar toda la página para solo volver a cargar la lista de Provincias.

Posible solución

Una forma de solucionar este problema es armar una serie de funciones con código del lado del cliente (típicamente JavaScript) para que en background haga un pedido a través de http, nos traiga la información y refresquemos los datos en la pantalla, toda esta lógica es bastante compleja y alejaría al programador del eje principal de su tarea, que es armar la lógica de negocios, obtener los datos y mostrarlos de la manera que mas le guste al usuario.

Solución con UpdatePanel

Como solucionarlo con ASP.NET AJAX, es muy fácil, solo hay que agrupar los controles que queremos refrescar entre una serie de tags y listo, todos los controles que hagan un postback dentro del grupo solo refrescaran a los controles que están en el grupo.

Vamos al ejemplo

Acá tenemos los dos DropDownList, el primero hace un posback cada vez que cambia su valor, mientras que el segundo no hace nada, el código en rojo es el único que tenemos que agregar:

El ScriptManager debe incluirse en las paginas que utilizan ASP.NET AJAX , si utilizamos MasterPages lo ponemos ahí y no hace falta incluirlo en cada página.

Del lado del Server complete dos eventos (Esto es solo para mostrar el ejemplo), el Load de la pagina carga el combo del Pais.

SelectedIndexChanged cargar las provincias según el país seleccionado.

Observaciones finales

Solo como anécdota es importante resaltar que ASP.NET AJAX, hace algo parecido a lo que dijimos en el punto anterior, lo bueno es que nosotros ni nos enteramos y no tenemos que preocuparnos por poner ni una sola línea de código del lado del cliente.

Instalación de ASP.NET AJAX

Acá dejo un link donde se puede obtener información acerca de la descarga, instalación y configuración del mismo.

http://ajax.asp.net/docs/InstallingASPNETAJAX.aspx

6 comentarios:

epm dijo...

Está muy chulo y la implementación es muy sencilla aunque no tanto la configuración. El web.config es mortal ;-(

Pero vamos creo que se ha ganado bastante, te ahorras toda la parte de cliente para implementar la llamada con el XMLHttp, que si quieres hacer las llamadas genéricas, hay que montar un pequeño pollo. ;-)

Gracias por el articulo.

Anónimo dijo...

rata, pon el código como texto

Anónimo dijo...

gracias colega, ni caso al post anterior, escibiendolo uno el código se aprende mejor...

chamba dijo...

Tengo una duda yo he implementado eso con asp y VB.. tengo dos DropDownlist uno fuera del Updatepanel con runat server y el otro dentro de UpDatePanel. y el trigger de cuando se hace el selectedIndexchanged, dentro de la funcion del DropDownList_SelectedIndexChanged cargo el otro ... pero si pongo el Break en el pageLoad siempre se ejecuta y supongo q no deberia hacerlo?.. me faltara alguna configuracion???

Benjamin Eidelman dijo...

chamba: Lo que supones suena lógico, sin embargo hay que recordar que el UpdatePanel de MS Ajax es sólo una forma fácil de evitar refrescar toda la página y actualizar solo una parte de ésta.

Sin embargo, internamente se produce un Post-Back y la página es cargada en el server (por eso se invoca al evento Page_Load como mencionas), y luego se envía al cliente únicamente la parte del html que debe refrescarse.

---

La manera de evitar esto es hacer un uso más avanzado de AJAX y escribiendo javascript, invocar un Web Service (por ej. definido con WCF) que devuelva unicamente la lista de elementos a cargar en el segundo Combo, y escribir un poco de JavaScript para mostrar los resultados obtenidos (esta parte se facilita si en el web service se configura serialización JSON).

Según he leído, creo que esto estará mejor soportado en próximas versiones de ASP.Net y MS Ajax.

Anónimo dijo...

Muy bueno el ejemplo. Lo felicito Compadre.