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