Compilación de vistas en ASP.NET MVC

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“.

image 

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

image

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.

image 

  1. <MvcBuildViews>true</MvcBuildViews>

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

 image

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 😉

[ASP.NET MVC] Jquery + Vistas parciales

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:

  1. <link href="../../Content/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
  2. <script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
  3. <script src="../../Scripts/jquery-ui-1.8.5.custom.js" type="text/javascript"></script>

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:

 

  1. public class tabViewModel
  2.     {
  3.         private string tabText1;
  4.         public string TabText1
  5.         {
  6.             get { return tabText1; }
  7.             set { tabText1 = value; }
  8.         }
  9.  
  10.         private string tabText2;
  11.         public string TabText2
  12.         {
  13.             get { return tabText2; }
  14.             set { tabText2 = value; }
  15.         }
  16.  
  17.         private string tabText3;
  18.         public string TabText3
  19.         {
  20.             get { return tabText3; }
  21.             set { tabText3 = value; }
  22.         }
  23.  
  24.     }

· 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:

 

Code Snippet
  1. public class tabContent
  2.     {
  3.         public tabViewModel getTabContent()
  4.         {
  5.             tabViewModel tab = new tabViewModel();
  6.             tab.TabText1 = getTextTab1();
  7.             tab.TabText2 = getTextTab2();
  8.             tab.TabText3 = getTextTab3();
  9.  
  10.             return tab;
  11.         }
  12.  
  13.         private string getTextTab1()
  14.         {
  15.             return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lacus. Donec auctor metus vel neque lobortis molestie. Nullam venenatis tellus. Proin commodo aliquet nisl. Quisque purus turpis, sagittis in, auctor quis, feugiat nec, nulla. Nam nec leo. Cras placerat ullamcorper elit. Fusce tempus faucibus tellus. Fusce sagittis ornare magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam in nunc. Vivamus condimentum. Mauris eu ante sit amet nulla fringilla euismod. Sed porttitor accumsan lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae";
  16.         }
  17.         private string getTextTab2()
  18.         {
  19.             return "In iaculis, sapien sit amet sagittis vestibulum, arcu turpis pulvinar dolor, et rutrum urna erat vitae nisi. Sed fringilla quam tempor leo. Suspendisse semper porta eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur auctor. Aenean imperdiet tempus nulla. Donec enim ipsum, ornare sed, convallis sit amet, egestas luctus, orci. In sit amet justo. Praesent luctus ultrices ligula. Aenean vel enim id sapien congue scelerisque. In volutpat. Proin imperdiet placerat purus. Ut luctus nunc. Praesent feugiat hendrerit sem. Nulla sem risus, egestas ac, suscipit et, facilisis vel, velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras molestie. Aenean consequat tellus ac leo. Nullam a dolor. Quisque arcu augue, tincidunt non, lacinia ut, scelerisque sed, sem.";
  20.         }
  21.         private string getTextTab3()
  22.         {
  23.             return "Nullam non ipsum. Aenean tempus, nisi at condimentum molestie, turpis nulla hendrerit lorem, sed aliquam risus leo mattis ligula. Donec posuere. Nam semper justo nec tortor. Nulla facilisi. Sed porta ante eu arcu. Quisque ut enim. Vestibulum eu massa. Vivamus rutrum, nunc at placerat congue, velit nulla pretium neque, eget fringilla est nisl vitae urna. Phasellus nec nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla rutrum luctus neque. Vestibulum posuere iaculis sem. Donec. ";
  24.         }
  25.  
  26.     }

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

  1. public ActionResult TabExample()
  2. {
  3.     tabContent contenido = new tabContent();
  4.     tabViewModel modelo = contenido.getTabContent();
  5.     return View(modelo);
  6. }

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:

image

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.

image

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.

  1. <p>
  2.     <%= Model.TabText1 %>
  3. </p>
  4. <p class="ui-state-highlight">¡¡Highlighted Text!!</p>

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:

  1. <p>
  2.     <%=Model.TabText2 %>
  3. </p>
  4. <p class="ui-state-error">¡¡Error Text!!</p>

Y en el caso de _tab3:

  1. <p>
  2.     <%=Model.TabText3 %>
  3. </p>

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

  1. <p class="ui-state-error">An error has occured !</p>

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:

  1. <div id="tabs">
  2.         <ul>
  3.             <li><a href="#tabs-1">Text 1</a></li>
  4.             <li><a href="#tabs-2">Text 2</a></li>
  5.             <li><a href="#tabs-3">Text 3</a></li>
  6.         </ul>
  7.         <div id="tabs-1">
  8.             <% Html.RenderPartial("_tab1", Model);  %>            
  9.         </div>
  10.         <div id="tabs-2">
  11.             <% Html.RenderPartial("_tab2", Model);  %>            
  12.         </div>
  13.         <div id="tabs-3">
  14.             <% Html.RenderPartial("_tab3", Model);  %>            
  15.         </div>
  16.     </div>

· implementamos la función jquery

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.     $("#tabs").tabs();
  4. });    
  5. </script>

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:

  1. <li><%= Html.ActionLink("Tab Text Example", "TabExample")  %></li>

Si compilamos nuestra aplicación obtenemos el resultado esperado:

image image

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.

[ASP.NET MVC]Personalizar interfaces de usuario mediante jQuery UI

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:

  1. <link href=”../../css/jquery-ui-1.8.5.custom.css” rel=”stylesheet” type=”text/css” />
  2. <link href=”../../css/demos.css” rel=”stylesheet” type=”text/css” />
  3. <script src=”../../Scripts/jquery-1.4.2.js” type=”text/javascript”></script>
  4. <script src=”../../Scripts/jquery-ui-1.8.5.custom.js” type=”text/javascript”></script>

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:

  1. #draggable
  2. {
  3.     width: 150px;
  4.     height: 150px;
  5.     padding: 0.5em;
  6.     background-color:Yellow;
  7. }

 

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

  1. public ActionResult Draggable()
  2. {
  3.     return View();
  4. }

 

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:

  1. <div class=”demo”>
  2.     <div id=”draggable” class=”ui-widget-content”>
  3.     <p>¡¡Arrastrame!!</p>
  4.     </div>
  5. </div>

 

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

  1. <script type=”text/javascript”>
  2.     $(function () {
  3.         $(“#draggable”).draggable();
  4.     });
  5. </script>

 

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.

image image

 

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:

  1. <div class=”demo”>
  2.     <div id=”accordion”>
  3.         <h3><a href=”#”>Section 1</a></h3>
  4.         <div>
  5.             <p>
  6.             Texto1
  7.             </p>
  8.         </div>
  9.         <h3><a href=”#”>Section 2</a></h3>
  10.         <div>
  11.             <p>
  12.             Texto 2
  13.             </p>
  14.         </div>
  15.         <h3><a href=”#”>Section 3</a></h3>
  16.         <div>
  17.             <p>
  18.             Texto 3
  19.             </p>
  20.             <ul>
  21.                 <li>List item one</li>
  22.                 <li>List item two</li>
  23.                 <li>List item three</li>
  24.             </ul>
  25.         </div>
  26.         <h3><a href=”#”>Section 4</a></h3>
  27.         <div>
  28.             <p>
  29.             Texto 4a
  30.             </p>
  31.             <p>
  32.             Texto 4b
  33.             </p>
  34.         </div>
  35.     </div>
  36. </div>

 

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

  1.  <script type=”text/javascript”>
  2.  
  3.      $(function () {
  4.          $(“#accordion”).accordion();
  5.      });
  6. </script>

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.

image 

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:

 

  1. .toggler { width: 500px; height: 200px; position: relative; }
  2.         #button { padding: .5em 1em; text-decoration: none; }
  3.         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
  4.         #effect h3 { margin: 0; padding: 0.4em; text-align: center}

 

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.

  1. <div class=”demo”>
  2.      <div class=”toggler”>
  3.      <div id=”effect” class=”ui-widget-content ui-corner-all”>
  4.      <h3 class=”ui-widget-header ui-corner-all”>Animate</h3>
  5.      <p>lalolaolaoalaoalao</p></div></div><a id=”button” class=”ui-state-default ui-corner-all” href=”#”>Toggle Effect</a> </div>
  6.      <div style=”DISPLAY: none” class=”demo-description”>
  7.      <p>Click the button above to preview the effect.</p>
  8.  </div>

 

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

  1. <script type=”text/javascript”>
  2.     $(function() {
  3.         $( “#button” ).toggle(
  4.             function() {
  5.                 $( “#effect” ).animate({
  6.                     backgroundColor: “#aa0000”,
  7.                     color: “#fff”,
  8.                     width: 500
  9.                 }, 1000 );
  10.             },
  11.             function() {
  12.                 $( “#effect” ).animate({
  13.                     backgroundColor: “#fff”,
  14.                     color: “#000”,
  15.                     width: 240
  16.                 }, 1000 );
  17.             }
  18.         );
  19.     });
  20.     </script>

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.

image image

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 😉

[ASP.NET MVC]Crear controles dinámicos mediante jQuery

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:

image  image

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:

  1. public JsonResult Tema(int TemaID)
  2.         {
  3.             var list = new object[] { };
  4.             switch (TemaID)
  5.             {
  6.  
  7.                 case 1:
  8.                     
  9.                     list = new object[] {
  10.                         new { value = 1, name = "Los pilares de la tierra" },
  11.                         new { value = 2, name = "La catedral del mar" },
  12.                         new { value = 3, name = "Millenium 1" }
  13.                     };
  14.                     break;
  15.                 case 2:
  16.                     list = new object[] {
  17.                         new { value = 1, name = "Ciencia divulgativa:del ábaco a Intenet" },
  18.                         new { value = 2, name = "Hacker" },
  19.                     };
  20.                     break;
  21.             };
  22.             return Json(list,JsonRequestBehavior.AllowGet);
  23.         }

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:

 

  1. <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></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.

 

  1. <table>
  2.         <tr>
  3.             <th>Temática:</th>
  4.             <td><select id="theme">
  5.             <option> — Selecciona una temática — </option>
  6.             <option value="1">Novela</option>
  7.             <option value="2">Informática</option>
  8.             </select></td>
  9.         </tr>
  10.         <tr>
  11.             <th>Libros:</th>
  12.             <td><select id="books"></select></td>
  13.         </tr>
  14.     </table>

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:

 

  1. <script type="text/javascript">
  2.         $(document).ready(function () {
  3.             $("#theme").change(function () {
  4.                 $.post("/Home/Tema/", { TemaID: $(this).val() }, function (data) {
  5.                     populateDropdown($("#books"), data);
  6.                 });
  7.             });
  8.         });
  9.         function populateDropdown(select, data) {
  10.             select.html('');
  11.             $.each(data, function (id, option) {
  12.                 select.append($('<option></option>').val(option.value).html(option.name));
  13.             });
  14.         }
  15.     </script>

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

image

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”.