jQuery – Cargando HTML externo

Hoy vamos a ver como utilizando AJAX podemos cargar HTML remoto en determinad página, de esta forma evitamos tener en nuestra página una gran cantidad de código HTML que hará mas pesada la misma.

Para cargar el HTML remoto vamos a utilizar como siempre jQuery y en este caso la función load, la sintaxis general es:

   1:  $("elemento").load('pagina.html');

Como se puede apreciar solo necesitamos un contenedor que generalmente será un div y la página que se quiere cargar.

Ahora vamos a ver que características tiene este evento load:

• Carga todo el contenido comprendido dentro de la etiqueta body.
• La página que se quiere cargar debe estar en el mismo dominio que la página desde la cual se hace el llamado.
• Es posible especificar un elemento particular de la página a cargar, por ejemplo de la página about.html solo cargar el div con id igual a divInfo, la sintaxis seria:

   1:  $("elemento").load('about.html #divInfo');

• Cuando se carga la página, solo se carga el HTML, por lo tanto si se tiene código JavaScript este no estará disponible, para solucionar este caso en la página  que realiza el llamado se debe definir el código necesario, para este caso no es posible hacerlo de la manera tradicional como se atacha un manejador de evento a un elemento, se debe hacer uso de la función live que permite asignar manejadores de eventos a elementos que se crean luego de la carga del DOM, les dejó un link donde hablé del tema: jQuery live.

Ahora vamos a implementar toda esa carreta con un ejemplo de verdad:

1. Tenemos una página aspx desde la cual vamos a realizar los llamados a las páginas externas, en definitiva nuestra página tenemos:

   1:  <div id="divAbout"></div>

   2:      <fieldset>

   3:          <legend>Cargar página completa</legend>

   4:          <ol id="olCompleta">

   5:              <li><a href="jQuery.htm">jQuery</a></li>

   6:              <li><a href="aspnet.htm">ASP.NET</a></li>

   7:          </ol>

   8:          <div id="divInfo"></div>

   9:      </fieldset>

  10:      <fieldset>

  11:          <legend>Cargar solo descripción</legend>

  12:          <ol id="olDescripcion">

  13:              <li><a href="jQuery.htm">jQuery</a></li>

  14:              <li><a href="aspnet.htm">ASP.NET</a></li>

  15:          </ol>

  16:          <div id="divOnlyDes"></div>

  17:      </fieldset>

y el código jQuery:

   1:   $(function () {

   2:              $("#divAbout").load('about.htm');

   3:              $("#olCompleta a").click(function (e) {

   4:                  var dirUrl = $(this).attr('href');

   5:                  $("#divInfo").load(dirUrl);

   6:                  e.preventDefault();

   7:              })

   8:              $("#olDescripcion a").click(function (e) {

   9:                  var dirUrl = $(this).attr('href') + ' #divDescripcion';

  10:                  $("#divOnlyDes").load(dirUrl);

  11:                  e.preventDefault();

  12:              })

  13:          })

Entonces la idea es:

• En el div con id igual a divAbout se va cargar la página about.htm, la cual tiene la información de contacto.
• En la primera lista olCompleta como su nombre lo indica se va a cargar la página objetivo de manera total cada vez que se de click en una de las opciones, en la variable dirUrl traemos la dirección de la página capturando el valor del atributo href, luego se realiza el cargue el el divInfo y finalmente con la línea e.preventDefault() lo que se hace es prevenir/cancelar el comportamiento normal del objeto, el cual sería enviarnos a una determinada página.
• Casi igual que el punto anterior, la diferencia es que se especifica en la línea 9 que de la página a cargar solo queremos el elemento con id igual a divDescripcion.

2. En la estructura de nuestro sitio tenemos las páginas HTML que vamos a cargar, como se menciono anteriormente debes estar en el mismo dominio que la página que realiza el llamado, en la imagen se visualiza dicha estructura:

3. Finalmente la aplicación se verá así:

Como se observa en la imagen, se esta implementando un llamado a páginas html y el contenido se muestra en una sola página.

Bueno como pueden ver es bastante fácil cargar HTML remoto utilizando AJAX.

Les dejo EL ejemplo que implementa dicha funcionalidad:

Descarga del ejemplo !

FileUpload AjaxControlToolkit

En el artículo anterior (míralo acá) vimos como utilizar el FileUpload que ofrece ASP.NET,  y como poder realizar validación tanto en el cliente como en el servidor, sin embargo este control no funciona cuando tenemos un UpdatePanel, o no totalmente, en tal caso el FileUpload debería estar asociado a un trigger del UpdatePanel.

Para solucionar el problema anterior podemos utilizar el control AsyncFileUpload disponible en el AjaxControlToolkit. Veamos las ventajas y desventajas de este control:

Ventajas:

1. Funciona en conjunto con el UpdatePanel.
2. Funciona de manera asíncrona.
3. Permite establecer un icono para indicar que se esta realizando el cargue.
4. Control de eventos en el cliente y en el servidor

Desventajas:

1. No funciona con Internet Explorer 9: En este punto tuve que activar la vista de compatibilidad.
2. Una vez iniciada la subida del archivo no es posible cancelarla.
3. Una vez utilizado el control, no es posible limpiar el contenido del mismo.
4. No es posible saber el progreso de carga del archivo.
5. La subida del archivo inicia una vez se seleccione el archivo.este se ha seleccionado.
6. No es posible manejar múltiples archivos.

En relación a las ventajas y desventajas de este control, en mi opinión muy personal todavía es un control que no utilizaría en una aplicación de gran impacto, pero bueno vamos a ver como es que funciona:

Código HTML del control:

<cc1:AsyncFileUpload ID="AjaxUpload" runat="server" UploaderStyle="Modern" Width="350px"
     ThrobberID="imgLoading" OnClientUploadComplete="UploadComplete"
     OnClientUploadError="UploadError"  />
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/ajax-loader.gif" />

Los atributos importante de este control son:

1. UploaderStyle: Permite seleccionar dos estilos, Modern que muestra el control de selección con un estilo más bonito además de tener una imagen, y el estilo Traditional, el cual solo muestra el botón de selección con un texto que indica selección de archivo.
2. ThrobberID: El id de la imagen que se mostrará cuando se este cargando el archivo.
3. OnClientUploadComplete: Función JavaScript que se ejecuta una vez se ha realizado satisfactoriamente el cargue del archivo.
4. OnClientUploadError: Función JavaScript que se ejecuta si se produce algún error al subir el archivo.

Funciones JavaScript:

function UploadComplete(sender, args) {
   var filename = args.get_fileName();

   var contentType = args.get_contentType();
   var text = "Nombre archivo: " + filename + ". Tamaño: " + args.get_length() + " bytes";

   document.getElementById('lblMensaje').innerText = text;
}

function UploadError(sender, args) {
   var text = "No se ha podio subir el archivo. " + args.get_errorMessage();

   document.getElementById('lblMensaje').innerText = text;
}

Con la función UploadComplete, mostramos el un label el nombre y el tamaño del archivo, mientras que con
la función UploadError informamos el error producido.

Funciones Servidor:

1. UploadedComplete: Se ejecuta cuando el archivo se carga con éxito.
2. UploadedFileError: Se lanza cuando el archivo esta corrupto.

Para realizar el guardado se dispone del método SaveAs el cual vimos en el artículo anterior.

En el próximo artículo vamos a revisar como implementar un FileUpload con jQuery.

Les dejo el código en VB como en C# del ejemplo:

Ejemplo en VB !

Ejemplo en C# !

GridView y PopupControlExtender

Hola a todos, a diario en mi trabajo, he tenido q trabajar bastante con el control gridview de asp, y he tenido que agregarle varias funcionalidades, para que sea mas amigable al usuario y para que su funcionamiento sea mas adecuado… asi que he decidido hacer varios post (este seré el primero sobre este control), para que cualquiera pueda mejorar la usabilidad de este control).

En este post, quiero mostrar como podemos mostrar detalles del gridview de forma “modal” con el popupcontrolextender, y asi darle mas usabilidad a nuestro gridview…
sin más carreta vamos a lo que nos interesa.

La idea es poder mostrar detalles de nuestro gridview con solo pasar el mouse por encima de un boton de detalles, como vemos en la siguiente imagen:

Asi, al pasar el mouse por cada uno de las imagenes, vamos a visualizar el nombre del pais y de la ciudad (un ejemplo simple, ya ustedes veran como aplicarlo).

Pero que necesitamos, como mencione anteriormente, vamos a usar el popucontrolextender del toolkit de ajax (si no lo tienes descargarlo aqui)

Ahora vamos a comenzar a constriur nuestro programa.

Agregamos un control grdiview a nuestra pagina aspx, y dentro de la definición de las columnas, agregamos un imagebutton y un popupcontrol extender, lo importante aqui, es que debemos comunicarnos con el servidor para poder hacer la consulta contra la base de datos y asi poder mostar los detalles, asi que en la propiedad DynamicServiceMethod del popupcontrolextender le damos el nombre de un WebMethodAttribute existente en nuesto codebehind, y en la propiedad DynamicContextKey le vamos a enviar los parametros para poder hacer los filtros en la consulta….

Dentro de nuestro WebMethodAttribute el cual debemos definir como shared en visual basic (static en c#), vamos a realizar laconsulta contra la base de datos, asi como se debe crear una tabla el la cual visualicemos los resultados…

Bien es sabido, que el popupcontrol se activa al dar click en un control (es nuestro caso imagebutton), y como la idea es mostrar los detalles con solo pasar el mouse por encima de la imagen, se debe agregar este comportamiento, lo cual hacemos en el evento rowcreated del gridview…alli agregamos los enventos onmouseover para mostrar los detalles al pasar el mouse por encima y onmouseout para ocultarlo cuando quitemos el mouse…

Como ven, no es algo complicado y si hará que nuestras aplicaciones sean más rápidas y mas fáciles para el usuario…lo cual es algo fundamental…

Link con el ejemplo !!

Espero les sea util este ejemplo y nos vemos en un próximo ejemplo, donde mostraré como hacer una paginación elegante y funcional del gridview…