Enriquecer la UI de aplicaciones ASP.NET MVC mediante Ajax

Ya que me encuentro realizando mis primeros pinitos con Ajax dentro de las aplicaciones ASP.NET MVC, me parece interesante mostrar un pequeño ejemplo de como podemos implementar MicrosoftAjax.js y MicrosoftMvcAjax.js  para enriquecer la interfaz de usuario de nuestras aplicaciones de manera sencilla.

Para ello creamos una aplicación de tipo ASP.NET MVC 2 Web Application que llamaremos IntegracionAjax, y en la que vamos a mostrar los datos de nuestros clientes (almacenados en una base de datos), seleccionando un cliente en concreto a partir de un desplegable.

Inicialmente, añadimos la base de datos donde se encuentran nuestros datos, que en nuestro caso será la base de datos Northwind.mdf. A continuación creamos el modelo de datos que nos permita interactuar con dicha base de datos. Para ello hacemos clic con el botón derecho sobre la carpeta Models y seleccionamos Add > New Item > LinqToSql Classes y le damos el nombre CustomerModel.

image 

Por últimos arrastramos sobre él la tabla Customer, de forma que ya queda definido el modelo.

Antes de comenzar a desarrollar el contenido y la lógica de nuestra aplicación, es necesario añadir las referencias a los scripts de ajax que vamos a utilizar para que todo funcione correctamente. Por ello abrimos la página maestra que se encuentra en Views >Shared> Site.Master y arrastramos los archivos MicrosoftAjax.js y MicrosoftMvcAjax.js a la cabecera de dicha página, de forma que se generan las referencias automáticamente:

  1. <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
  2. <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

A continuación creamos un controlador que nos permita gestionar todas las acciones relacionadas con los clientes, para ello hacemos clic con el botón derecho sobre la carpeta Controllers y le damos el nombre de CustomerController.

image

Para poder utilizar nuestro modelo desde el controlador es necesario:

  1. Añadir la referencia a nuestro modelo:
    1. using IntegracionAjax.Models;

  2. Crear el contexto de datos:
    1. CustomerModelDataContext cust = new CustomerModelDataContext();

Además, en dicho controlador vamos a definir dos resultados de acción:

El primero de ellos es Index(), que se encargará de mostrarnos la página principal compuesta por un dropdownbox implementado en ajax que contendrá el nombre y apellido de los clientes, así como un botón que al pulsarlo nos permitirá ver los detalles del cliente seleccionado. El código de está acción será el siguiente:

  1. public ActionResult Index()
  2.         {
  3.             var customers = cust.Customers.ToList();
  4.             ViewData["id"] = new SelectList(customers, "CustomerID", "ContactName");
  5.             return View();
  6.  
  7.         }

A continuación pasamos a configurar la vista correspondiente. Para ello hacemos clic con el botón derecho sobre la acción y seleccionamos AddView

image

Dentro de la vista, implementamos el siguiente código, que se encargará de cargar el desplegable con los valores de los clientes, y de lanzar la acción Details, cuando se pulse el botón definido

  1. <h2>Customers</h2>
  2.     <div>
  3.     <%
  4.         using (Ajax.BeginForm("Details", new AjaxOptions { UpdateTargetId = "customerDetails" })){ %>
  5.         <p>Customer:<%=Html.DropDownList("id")%></p>
  6.         <p><input type="submit" value="Details"/></p>
  7.         <% } %>
  8.     </div>
  9.     <div id="customerDetails">
  10.     </div>

Por lo tanto el segundo resultado de acción que tenemos que definir es Details(), que se encargará de hacer una consulta en nuestro contexto de datos, de coger el elemento coincidente con el id del valor buscado, y de devolvérnoslo a través de una vista parcial.

  1. public ActionResult Details(string id)
  2.         {
  3.             var customer = cust.Customers.Single(m => m.CustomerID == id);
  4.             return PartialView("customerDetails", customer);
  5.  
  6.         }

Para ello es necesario crear una vista parcial que se llame, tal y como indicamos, “customerDetails”. Hacemos clic con el botón derecho en Views > Customer > AddView y creamos una vista con las siguientes características:

image

Si queremos podemos modificar el estilo de dicha vista para que nos pinte los título de negrita, o podemos mostrar todos los detalles del elemento en línea horizontal, pero eso a gusto del consumidor 😉

De esta forma conseguimos dotar de mayor interactividad a nuestra aplicación, y de una interfaz de usuario más atractiva.

image image

[ASP.NET MVC] Mostrar imágenes + jQueryLightbox mediante modelo XML

Trabajando con las distintas opciones que ofrece el Modelo de las aplicaciones MVC, vamos a ver como implementar un modelo que nos permita leer la información referente a un conjunto de imágenes definidas en un archivo XML, y mostrarlas mediante una vista específica a la que, además, aplicaremos el efecto jQueryLightbox.

Inicialmente partimos de un proyecto de tipo ASP.NET MVC 2 Web Application llamado ImagesExample, y lo primero que hacemos es añadir las imágenes que queremos mostrar y el archivo que contiene los metadatos de las mismas. Para ello creamos una carpeta dentro de nuestro proyecto que se llamará Imagenes. En ella añadimos, las imágenes deseadas y un nuevo elemento de tipo XML file, llamado CaratulasMetaData, que en nuestro caso, contendrá el siguiente código de definición:

  1. <?xml version=«1.0« encoding=«utf-8«?>
  2. <images>
  3.   <image>
  4.     <filename>Bunbury.jpg</filename>
  5.     <titulo>Las Consecuencias</titulo>
  6.     <cantante>Bunbury</cantante>
  7.     <año>2010</año>
  8.   </image>
  9.   <image>
  10.     <filename>MonicaNaranjo.jpg</filename>
  11.     <titulo>Adagio</titulo>
  12.     <cantante>Monica Naranjo</cantante>
  13.     <año>2009</año>
  14.   </image>
  15.   <image>
  16.     <filename>Rosario.jpg</filename>
  17.     <titulo>Cuentame</titulo>
  18.     <cantante>Rosario Flores</cantante>
  19.     <año>2009</año>
  20.   </image>
  21.   <image>
  22.     <filename>Shakira.jpg</filename>
  23.     <titulo>Loba</titulo>
  24.     <cantante>Shakira</cantante>
  25.     <año>2008</año>
  26.   </image>
  27. </images>

En dicho código definimos una lista de imágenes <images>, donde cada imagen corresponde con un elemento <image>, y cuyas propiedades son las siguientes:

  • filename (nombre de la imagen)
  • titulo
  • cantante
  • año

A continuación pasamos a definir el modelo que nos permitirá interactuar con nuestros datos. Dentro de nuestra carpeta Models, añadimos 2 clases: una llamada Image, que utilizaremos para definir nuestro objeto, y otra llamada ImageModel que utilizaremos para interactuar con dicho objeto.

La clase Image contendrá el siguiente código:

  1. public class Image
  2.     {
  3.         public Image(string filename, string titulo, string cantante, string año)
  4.         {
  5.             Archivo = filename;
  6.             Album = titulo;
  7.             Cantante = cantante;
  8.             Año = año;
  9.  
  10.         }
  11.  
  12.         public string Archivo { get; set; }
  13.         public string Album { get; set; }
  14.         public string Cantante { get; set; }
  15.         public string Año { get; set; }
  16.     }

 

 

 

 

La clase ImageModel contendrá el siguiente código:

  1. public class ImageModel : List<Image>
  2.     {
  3.         public ImageModel()
  4.         {
  5.  
  6.             string directoryOfImage = HttpContext.Current.Server.MapPath(«~/Imagenes/»);
  7.             XDocument imageData = XDocument.Load(directoryOfImage + @»/CaratulasMetaData.xml»);
  8.             var images = from image in imageData.Descendants(«image») select new Image(image.Element(«filename»).Value, image.Element(«titulo»).Value, image.Element(«cantante»).Value,image.Element(«año»).Value);
  9.             this.AddRange(images.ToList<Image>());
  10.         }
  11.     }

Por último dentro de nuestro controlador HomeController, añadimos un resultado de acción llamado Music, a través del cual pasaremos a la vista el modelo que queremos mostrar:

  1. public ActionResult Music()
  2.         {
  3.             ImageModel cds = new ImageModel();
  4.             return View(cds);
  5.         }

A continuación creamos una vista vacía, que vamos a personalizar para que nos muestre los datos de nuestro modelo de la forma deseada.  Para ello hacemos clic con en botón derecho sobre el resultado de acción Music y seleccionamos Add View, creando una vista tal y como se observa en la siguiente imagen:

image 

En dicha vista, vamos a mostrar cada una de las imágenes y sus propiedades dentro de una tabla accediendo a los distintos valores a través de nuestro modelo. Para ello utilizamos el siguiente código:

  1.   <% foreach (var image in ViewData.Model) { %>
  2.  
  3. <table>
  4.     <tr>
  5.         <td rowspan=»3″>
  6.             <img alt=»» src=»/Imagenes/<%= image.Archivo %>« height=»100″ width=»100″ />
  7.         </td>
  8.             
  9.         <td>
  10.             <b>Disco:</b> <%= image.Album %>
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.             <td>
  15.             <b>Cantante:</b> <%= image.Cantante%>
  16.         </td>
  17.     </tr>
  18.     <tr>
  19.         <td>
  20.             <b>Año:</b> <%= image.Año %>
  21.         </td>
  22.     </tr>          
  23. </table>
  24.  
  25. <% }%>

 

Si compilamos, vemos que obtenemos una lista estática de imágenes con sus propiedades :

image

 

Por último vamos a aplicar el efecto JqueryLightBox a dichas imágenes, de forma que cuando hagamos clic sobre cada una de ellas podamos verlas en tamaño real, y navegar por ellas. Para poder aplicar este efecto descargamos los archivos necesarios que podemos encontrar en la siguiente dirección:

http://leandrovieira.com/projects/jquery/lightbox/

Introducimos cada archivo en la carpeta correspondiente:

  • Dentro de la carpeta Scripts, añadimos el archivo jquery.lightbox-0.5.js,
  • Dentro de la carpeta Contenidos añadimos las imágenes que nos permiten navegar por la aplicación: lightbox-btn-close.gif, lightbox-btn-next.gif, lightbox-btn-prev.gif, lightbox-ico-loading.gif
  • Creamos una carpeta llamada css, donde añadiremos el archivo referente a los estilos jquery.lightbox-0.5.css

A continuación debemos referenciar, tanto el archivo donde se encuentra el código Javascript que vamos a utilizar, como el de estilo que vamos a aplicar. Por lo que vamos a nuestra página maestra Views > Shared> Site.Master, y dentro de la cabecera <head> añadimos el siguiente código:

 

  1. <script src=»/Scripts/jquery-1.4.1.js» type=»text/javascript»></script>
  2. <script src=»/Scripts/jquery.lightbox-0.5.js» type=»text/javascript»></script>
  3. <link href=»/css/jquery.lightbox-0.5.css» rel=»stylesheet» type=»text/css» />

 

Por último vamos a llamar a la función lightbox desde la página en la que queremos aplicar dicho efecto, que en nuestro caso es Music.aspx. Para ello añadimos el siguiente código:

  1. <script type=»text/javascript»>
  2.         $(function ImageLB() {
  3.             $(‘#gallery a’).lightBox({
  4.                 imageLoading: ‘/Content/lightbox-ico-loading.gif’,
  5.                 imageBtnClose: ‘/Content/lightbox-btn-close.gif’,
  6.                 imageBtnPrev: ‘/Content/lightbox-btn-prev.gif’,
  7.                 imageBtnNext: ‘/Content/lightbox-btn-next.gif’,
  8.                 txtImage: ‘Álbum’,
  9.                 txtOf: ‘de’
  10.             });
  11.         });
  12.     </script>

Y modificamos la parte de nuestra vista en la que se cargaban las imágenes, para que dicho efecto funcione.

  1. Añadimos las imágenes que obtenemos de nuestro modelo dentro de un <div> cuyo id  sea gallery, ya que en el código javascript estamos indicando que vamos a aplicar este efecto a un elemento de tipo hipervínculo (<a>) cuyo identificador es gallery.
  2. Y añadimos una url (href) a nuestro hipervínculo, que será la dirección relativa en la que se encuentran nuestras imágenes dentro del sitio.

Teniendo en cuenta todo lo anterior, el código resultante será el siguiente:

  1. <div id=»gallery»>
  2.                 <a href=»/Imagenes/<%= image.Archivo %>«><img alt=»» src=»/Imagenes/<%= image.Archivo %>« height=»100″ width=»100″ /></a>
  3.             </div>

De forma que si compilamos nuestra aplicación y accedemos a la página de música, que en nuestro caso, tal y como la hemos la hemos definido a través del controlador y la acción es: http://localhost:52361/Home/Music vemos que al hacer clic sobre cualquiera de nuestras imágenes se aplica el efecto lightbox deseado

image

 

 

Así que de forma sencilla, hemos conseguido que la aplicación presente una interfaz de usuario enriquecida y, por lo tanto sea más atractiva visualmente para el usuario.Y esto es todo por hoy 😉

Descargar el código aquí