Mes: noviembre 2010

Aunque probablemente ya se haya hablado de este tema, nunca esta de más recordar una posible opción para habilitar la compilación de las vistas en una aplicación ASP.NET MVC.

En una aplicación ASP.NET MVC, existen numerosos errores ocultos en las vistas. Estos errores no son descubiertos hasta la propia interactuación del usuario con la vista. Por lo que se plantea evitar este problema añadiendo las vistas al proceso de compilación.

Para activar la compilación de las vistas MVC, una de las opciones “más votadas”, es la actualización manual del contenido xml del archivo .csproj de nuestro proyecto. Esto se puede realizar, haciendo clic con el botón derecho sobre nuestro proyecto dentro del explorador de soluciones (Solution Explorer) y seleccionando la opción «Unload Project«.

 

Una vez que el proyecto ha sido descargado, volvemos a hacer clic con el botón derecho sobre el mismo y seleccionamos la opción “Edit [Project].csproj”

Buscamos la etiqueta <MvcBuildViews> cuyo valor esta definido por defecto a “false”. Y cambiamos su valor a “true” de forma que estamos activando el compilado de las vistas en MVC.

 

Por último recargamos el proyecto de nuevo, haciendo clic con el botón derecho y seleccionando la opción Reload Project.

 

Y volvemos a construir la solución. Ahora, las vistas son compiladas, alertándonos de los errores que existen en las mismas. Pero esta nueva configuración, también tiene sus “Peros…”, valga la redundancia, y es que ralentiza bastante la compilación del proyecto.

Seguro que existen otras opciones, y probablemente más eficientes, así que os animo a que las compartáis a través de este post… u otros 😉

Para finalizar lo que se podría denominar como el “mes jQuery”, vamos a ver otro pequeño ejemplo del uso de jquery y jqueryui dentro de nuestras aplicaciones ASP.NET MVC. En este caso veremos como crear un menú de pestañas, que nos recargue diferente información en una misma página a través del uso de vistas parciales.

Para ello, creamos una aplicación llamada jQueryApp de tipo ASP.NET MVC 2 Web Application, y añadimos los archivos necesarios a nivel de script (carpeta Scripts) y de estilos (carpeta Content) que en este caso son:

· jquery-ui-1.8.5.custom.css.

· jquery-1.4.2.js

· jquery-ui-1.8.5.custom.js

A continuación, hacemos referencia a los mismos dentro de nuestra página maestra (Views/Shared/Site.Master) para que podamos hacer uso de ellos desde cualquier página de nuestro sitio web. Para ello arrastramos los archivos correspondientes dentro de la cabecera de la página maestra de forma que esta se queda de la siguiente manera:

El siguiente paso consiste en crear el modelo con el que vamos a trabajar, y que es el que se encargará de crear nuestro objeto formado por tres pestañas con sus correspondientes contenidos. Para ello vamos a añadir dos clases dentro de la carpeta Models:

· Una llamada tabViewModel que se encargará de definir las pestañas y que tendrá el siguiente código:

 

· Otra llamada tabContent que se encargará de cargar el contenido específico en cada una de las pestañas. Esta clase constará del siguiente código:

 

A continuación dentro de HomeController creamos un resultado de acción llamado TabExample:

Creamos la vista para este resultado de acción. Para ello hacemos clic con el botón derecho sobre la acción Add View > TabExample, y seleccionamos las siguientes características:

A continuación vamos a ir creando las distintas vistas parciales. La primera vista que vamos a crear es _tab1. Para ello hacemos clic con el botón derecho sobre Views > Shared> Add View, y seleccionamos las opciones que indican que se trata de una vista parcial fuertemente tipada.

En dicha vista añadimos el siguiente código que se encargará de mostrarnos el texto asignado a la pestaña correspondiente, y en la que además añadimos un texto con un estilo específico.

Repetimos estos mismo pasos para _tab2, y _tab3, pero el código de cada una de las vistas será diferente. En el caso de _tab 2 debemos añadir:

Y en el caso de _tab3:

También configuramos la vista _error, que tendrá el siguiente código:

Por último, volvemos a la vista TabExample.aspx y dentro de ella:

· definimos el objeto sobre el que vamos a aplicar la función jquery, indicando los enlaces correspondientes en cada caso, y el renderizado de datos que se mostrará en cada uno de ellos:

· implementamos la función jquery

Para terminar añadimos el enlace a la página TabExample dentro de la página Index.aspx del controlador Home. Para ello utilizamos el siguiente código:

Si compilamos nuestra aplicación obtenemos el resultado esperado:

El código utilizado es menor que si implementáramos Ajax  para conseguir el mismo resultado y además el desarrollo es más sencillo. Esto se debe a jquery explota toda la potencia de Ajax pero de forma más simplificada.

Por eso, una vez más, os animo a ir conociendo un poco más esta tecnología.

Siguiendo en la línea del último artículo, relacionado con el uso de jQuery en aplicaciones ASP.NET MVC, en esta ocasión vamos a ver como se puede implementar jQueryUI para enriquecer nuestras interfaces de usuario. jQueryUI es una biblioteca de componentes para el framework jQuery, que ofrece un conjunto de plugins, efectos visuales y widgets que nos permite crear interfaces de usuario más potentes de forma sencilla.Para poder hacer uso de ella es necesario, o bien descargarla de la página http://jqueryui.com/download y agregarla a nuestra aplicación, o acceder a ella via Google CDN.

Si optamos por la primera de las opciones, en el fichero comprimido de la descarga podemos encontrar:

• la librería jqueryui con el código de las opciones seleccionadas, y la librería jquery de la que depende
• una distribución para desarrolladores (development-bundle), con:
  • la documentación del framework,
  • páginas de demo con ejemplos de uso de cada funcionalidad,
  • librerías js con cada una de las funcionalidades concretas
• el tema css elegido. Este se puede personalizar mediante el uso de la herramienta ThemeRoller 

A lo largo de este artículo vamos a ver algunas de las funcionalidades básicas que podemos implementar utilizando esta biblioteca. Para ello vamos a crear un proyecto de tipo ASP.NET MVC 2 Web Application, que llamaremos jQueryInteractions, y sobre el que iremos configurando las distintas aplicaciones.

1.Componentes de Interacción:

Los componentes de interacción nos permiten añadir comportamientos a determinados objetos mediante la invocación a los siguientes métodos:

• $.draggable();: añade al elemento la propiedad de poderse arrastrar.
• $.droppable();: asigna la propiedad a un elemento para que pueda recibir objetos soltados tras el arrastre.
• $.resizable();: asigna  al elemento la propiedad de poder redimensionarse.
• $.selectable();: asigna la propiedad seleccionable a un elemento o a todos sus hijos.
• $.sortable();: asigna la propiedad ordenable a un elemento o a todos sus hijos.

A continuación vamos a ver un ejemplo de cómo implementar un tipo de interacción:

 

Draggable (arrastrable)

 

Inicialmente añadimos a nuestra aplicación todos los archivos necesarios para el correcto uso de esta biblioteca:

• Estilos:

o jquery-ui-1.8.5.custom.css

o demos.css

• Los scripts

o jquery-1.4.2.js

o jquery-ui-1.8.5.custom.js

Y agregamos las referencias a los mismos dentro de la cabecera (<head>) de la página maestra Site.Master que se encuentra en Views/Shared, de forma que podamos usarlos desde cualquiera de las vistas de la aplicación:

A continuación creamos el objeto que va a ser “arrastrable”, que en nuestro caso se tratará de un cuadrado amarillo, sobre el que aplicaremos la función. Para ello abrimos el archivo Site.css, que se encuentra dentro de la carpeta Content, y añadimos el siguiente código:

 

A continuación, dentro del controlador Home añadimos un ActionResult llamado Draggable,

 

Cuya vista se deberá configurar de la siguiente manera:

1. Añadimos un texto que se aplicará a nuestro objeto a través del estilo definido en demo.css:

 

2. Añadimos la función a implementar, que será:

 

Y de esta forma si accedemos a la página correspondiente [http://localhost: 51465]/Home/Draggable, vemos como podemos arrastrar nuestro objeto por la página.

 

2.Widgets:

Un widget es un componente reutilizable de la interfaz de usuario. jQuery UI presenta una serie de componentes predefinidos que nos permiten inyectar comportamientos a diferentes elementos identificables de nuestro html.

A continuación vamos a ver un ejemplo de como implementar un widget:

Accordion

Dentro del controlador Home añadimos un ActionResult llamado Accordion, cuya vista se deberá configurar de la siguiente manera:

1. Añadimos las distintas cabeceras, y contenidos de nuestro desplegable, según el estilo definido en demo.css:

 

2. Añadimos la función a implementar, que será:

Y de esta forma si accedemos a la página correspondiente [http://localhost: 51465]/Home/Accordion, vemos como obtenemos el desplegable dinámico con sus cabeceras y su contenido.

 

3.Efectos visuales:

Jqueryui presenta una serie de métodos, que extienden las funcionalidades ya existentes en jquery, y que nos permiten añadir efectos de animación de forma sencilla mediante :

– Transiciones básicas: permiten implementar animaciones sobre un elemento.

• Effect

– Transiciones de visibilidad: permiten implementar animaciones realizando modificaciones en la visibilidad de los elementos

• Show – Anima la entrada de un elemento(mostrándolo)
• Hide – Anima la salida de un elemento (ocultándolo)
• Toggle – Anima el cambio de estado de un elemento

– Transiciones de color: permiten implementar animaciones realizando modificaciones en el color de los elementos

• Animate – Anima el color de un elemento
  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

– Transiciones de clases: permiten implementar animaciones realizando modificaciones en las clases (o atributos) que definen los estilos de los elementos

• addClass – Añade una clase a un elemento con una transición entre estados.
• removeClass – Elimina una clase de un elemento con una transición entre estados.
• toggleClass – Añade una clase si no está presente, y elimina una clase si lo esta mediante una transición de estado.
• switchClass – Intercambia una clase por otra con una transición de estado.

A continuación vamos a ver un ejemplo de como aplicar un efecto de color:

Color effect

Inicialmente configuramos el estilo de los elementos que vamos a utilizar en nuestra vista. Para ello añadimos el siguiente código en el archivo Site.css:

 

 

Dentro del controlador Home añadimos un ActionResult llamado ColorEffect, cuya vista se deberá configurar de la siguiente manera:

1. Añadimos un un botón y un elemento de tipo effect según el estilo definido en demo.css. Al hacer clic sobre dicho botón se animará el objecto cuyo id es “effect”, cambiando de dimensiones y de color.

 

2. Añadimos la función a implementar, que será:

Y de esta forma si accedemos a la página correspondiente [http://localhost: 51465]/Home/ColorEffect, vemos como al hacer clic sobre el botón Toggle Effect, nuestro objeto se anima y cambia de color.

Aquí os dejo el proyecto con estos ejemplos… y algunos más. Aunque podéis encontrar este funcionalidades y muchas más (y más complejas) en la página de jqueryui: http://jqueryui.com/demos/

Espero que con este artículo os entre un poco el gusanillo con este tema, por lo menos esa es mi intención 😉

En el último artículo que escribí, ya hace un tiempo por cierto, vimos como podemos interactuar con Ajax para conseguir interfaces de usuario más potentes. En esta ocasión vamos a ver una aplicación que tiene el mismo objetivo, pero utilizando jQuery para ello. Como ya hemos visto en alguna ocasión jQuery ofrece una amplia gama de posibilidades para animar objetos y crear efectos dentro de nuestras páginas web, pero también aporta otro tipo de funcionalidades. En este caso vamos a ver cómo podemos crear controles dinámicos, haciendo uso de esta biblioteca que viene integrada dentro del propio Framework MVC, evitando de esta forma el uso de postbacks.Para ello vamos a ver un pequeño ejemplo de como implementar interfaces de usuario enriquecidas mediante el uso de jquery. 

Inicialmente, creamos un proyecto llamado jQueryApp de tipo ASP.NET MVC 2 Web Application:

 

Dentro de dicha aplicación, abrimos el controlador HomeController que se crea por defecto, y creamos una acción llamada Tema, que se encargará de serializar nuestro objeto a un elemento de tipo Json, para que podamos mostrarlo a través de una vista específica. Este presentará el siguiente código:

A continuación pasamos a modificar la vista Index existente (o podemos crear una vacía), que será donde definiremos nuestros elementos. En primer lugar,  es necesario configurar la vista para poder usar jquery en ella.  Para ello arrastramos el archivo jquery-1.4.1.js de forma que se crea el código de referencia del script:

 

En segundo lugar añadimos una tabla para definir los elementos a mostrar, que en nuestro caso serán dos desplegables. El primero de ellos se cargará a partir de una serie de datos introducidos manualmente y nos permitirá seleccionar la temática de nuestros libros. Y el segundo se actualizará en función del elemento seleccionado en el primero de los desplegables y nos mostrará una serie de libros en función del tipo de temática seleccionada, tal y como lo hemos definido a través de nuestro objeto.

 

A continuación añadimos el código javascript que se encargará de ejecutar la función específica, para ello añadimos una etiqueta <script> en nuestra vista donde colocaremos todo el código necesario:

 

La primera de las funciones comprueba el cambio de valor en el selector #theme, y en función de ello realiza un post a la acción Tema del controlador, para lanzar la función populateDropDown, teniendo en cuenta los valores obtenidos a partir del atributo TemaID.

La funcion populateDropdown, se encarga de cargar el contenido del desplegable inferior en función del elemento que es seleccionado en el desplegable superior. Para ello, la función recibe dos parámetros, el dropbox a rellenar, que en este caso es “books”, y los valores del mismo que son leídos a partir de nuestro objeto, y que son mapeados como elementos de nuestro desplegable a través de la etiqueta de definición <option>.

Si compilamos nuestra aplicación y navegamos hasta /Home/Tema, vemos cómo se va actualizando el desplegable inferior en función de lo que seleccionamos en el superior

Aunque esto es sólo un ejemplo básico del uso que se le puede dar a jquery para la creación de interfaces de usuario enriquecidas, es suficiente para ver parte de la potencia que ofrece jquery para el desarrollo de este tipo de aplicaciones… y todo ello de manera “relativamente sencilla”.