La sección del invitado: Update panel

-Escrito por Víctor Paredes.
Motivados por la dinámica del mercado, nuestras aplicaciones web deben ser cada ves más rápidas, más versátiles y más intuitivas, los usuarios requieren cada ves información mas rápida y mejor presentada. La velocidad y la forma en que se presenta la información en una aplicación web es hoy uno de los puntos mas importantes que determinan el éxito o fracaso de un proyecto.

Para cubrir estas necesidades, contamos con diversos frameworks y técnicas que permiten acelerar y mejorar la presentación de la información. En esta ocasión vamos a presentar una forma de realizar fácilmente un "Update Panel". Este recurso permite que se actualice parte de la información de la pagina sin necesidad de enviar una solicitud HTTP nueva al servidor, al bajar las solicitudes nuestra aplicación web se vuelve mas rápida, consume menos recursos y luce mas profesional.

El ejemplo que vamos a presentar es simple, un ComboBox con los alias de súper héroes. Cuando elegimos uno debe mostrar el nombre real. para esto solo usaremos las herramientas que nos provee ASP.NET MVC con Visual Studio 2010. La solución fue hecha para .NET 4 pero funciona también para la 3.5. (Al pie de la publicación podrán descargar el ejemplo)

Cómo funciona el ejemplo

1. Vamos a tener un método en un controller que va a cargar la página por primera vez.
2. Otro método en el mismo controller va a recibir un parámetro y en base a este, va a devolver codigo HTML.
3. Desde una pagina web, utilizando ajax, invocamos al método del punto 2, enviamos un parámetro y esperamos que nos devuelva el código HTML generado.
4. Con el resultado en la mano actualizamos vía DOM un div con la información que obtuvimos.

La aplicación paso a paso

Para nuestro ejemplo vamos a crear un modelo simple con dos atributos de tipo string: Name y Alias. A la clase la llamaremos Hero.cs.

Luego de tener el modelo, vamos a simular un acceso a una base de datos ( web services o lo que se necesite usar )

En el mismo controller ya agregamos la accion del punto 1. Es la que va a cargar inicialmente la pagina por primera vez.

Luego, agregamos la acción del punto 2. La misma, como se ve en la imagen, recibe un nombre y devuelve una partial page renderizada inyectando el objeto que se obtuvo según el parámetro recibido.

Luego de esto, creamos la vista que va a renderizar la pagina web que se enviará al navegador del usuario.

En la imagen anterior hay que notar dos cosas:

1. El control que vamos a usar para provocar la carga del UpdatePanel, en nuestro caso es un DropDownList
2. La vista parcial, la misma esta contenida dentro de un DIV con id "UpdatePanel" (el ID es indiferente mientras se respete en todos lados).

Agregamos el código Java Script necesario para comunicarnos con el controller.

Y el código para enlazar el control DropDownList con la función JS.

Para completar la parte WEB, creamos la vista parcial que va a develar el nombre del súper héroe. Dentro de esta pagina podemos trabajar como si fuera cualquier otra vista de Razor/ASPX.

Finalmente el resultado...

Por Juan Barrionuevo