Crear un cargador de imágenes dinámico y asíncrono en ASP .NET

Hace unos días ando trasteando un poco con ASP .NET. Debo reconocer que al principio no me llamaba mucho la atención, pues la tecnología es similar a Java y prefiero éste como lenguaje. Sin embargo, estoy trabajando un sitio en Visual Wev Developer 2010 Express y me he llevado una gran sorpresa con el Framework y el IDE de Microsoft, especialmente en lo que se refiere a trabajo asíncrono.

En esta entrada vamos a hacer una página que cargue dinámicamente cualquier imagen ubicada en una ruta remota (en otro servidor), asíncronamente y sin escribir una sola línea de Javascript. Cuando hablo de "dinámicamente" me refiero a que el usuario decide la ruta, no está predefinida en el aplicativo, y cuando me refiero a "asíncronamente" quiero decir que la página no se refresca, el elemento se carga sin hacer un refresco de la página, algo habitual desde hace ya varios años con Ajax.

Todo esto no es nuevo para nada, como dije, se puede hacer lo mismo desde hace años. Lo que me sorprende es la facilidad con que se puede hacer y sin escribir (nosotros, el Framework sí) una sóla línea de Javascript. Empecemos:

Creamos un proyectos nuevo

Al iniciar nos encontramos con este código, al cual le borraremos el fragmento seleccionado:

Al moverse a la pestaña Diseño veremos el resultado, un contenido vacío:

Ahora comenzaremos a arrastrar componentes al área vacía. También podemos agregar los mismos componentes a código, pero prefiero el método visual.

Lo primero que necesitaremos será un ScriptManager:

Este componente no es visual, es decir, no se mostrará en el resultado final, pero es necesario para trabajar con paneles asíncronos. Ahora necesitamos un UpdatePanel:

Todo lo que ubiquemos dentro de este panel se comportará asíncronamente, es decir, no recargará la página completa, los componentes se actualizarán a través de Javascript. Ahora pondremos una imagen dentro del UpdatePanel:

Esta será la imagen que cambiaremos dinámicamente. Ahora pondremos una imagen que se cargará al principio como imagen predeterminada. Por ejemplo, esta imagen:

Para agregarla al proyecto debemos abrir las propiedades del mismo y buscar la pestaña Recursos. Luego hacemos clic en el menú Agregar Recurso > Agregar Archivo Existente

Buscamos nuestra imagen de muestra y la agregamos como recurso. Este es el resultado:

Guardamos. Ahora seleccionamos nuestro componente imagen y en las propiedades modificamos el ImageURL. Podemos abrir el cuadro de selección de recurso:

Nuestro recurso estará en la carpeta Resources. Hacemos clic en Aceptar para ver la imagen actualizada en el diseñador. En las propiedades de la imagen le cambiamos la propiedad Width de forma que al cargar una imagen siempre conserve un ancho fijo. A mi imagen le puse 500px. Ahora, debajo de la imagen, agregamos un campo de texto y un botón:

Hacemos dobleclic en el botón para que se abra el código donde pondremos la función de cargar la imagen que el usuario escriba en el cuadro de texto:

Como vemos, es una sola línea de código (línea 18). Cuando compilamos y ejecutamos, éste es el resultado:

Ahora escribimos la URL de una imagen cualquiera en el cuadro de texto, pulsamos el botón y:

Nuestra imagen cargada dinámicamente y sin refrescar la página. Ya sé que esto se puede hacer con Javascript en cualquier tecnología (PHP, Java, etc.), lo sorprendente aquí es que lo tenemos usando sólo componentes visuales y escribiendo una sola línea de código en C#, nada en Javascript. El Framework hace el resto del trabajo.

Un ejercicio adicional es ponerle al aplicativo un mensaje que indique que se está cargando la imagen, esto para cuando la imagen es muy grande y tarda en cargarse. Para hacerlo podemos usar el componente UpdateProgress:

Ahora vamos a sus propiedades y le asociamos nuestro UpdatePanel:

Finalmente ponemos el componente que queramos mostrar mientras se carga la imagen:

Aquí, un Label que dice "Cargando imagen". El UpdateProgress es un div que solo se mostrará mientras se esté ejecutando una función asíncrona. Al terminarse de ejecutar, el div se oculta nuevamente.

Esto es todo por ahora, mientras vaya aprendiendo nuevas cualidades de este Framework las iré escribiendo aquí.