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

7 comentarios en “[ASP.NET MVC]Crear controles dinámicos mediante jQuery”

  1. Hola Javier,
    Pues uso Windows Live Writer como editor del blog. Y para añadir las partes del código utilizo el plugin Paste As Visual Studio Code v1.6. Cuando vas a buscar el plugin, tienes que filtrar por el idioma inglés porque en español no aparece.

    Un saludo

  2. Tengo ese script funcionando en una aplicacion MVC tambien, sin embargo cuando carga el formulario (El cual esta fuertemente tipeado) solamente me carga el primer selec pero no el segundo (obviamente despues de seleccionar algo en el primero). Es el famoso ejemplo de estado>Municipio. alguna sugerencia?

  3. Muy bueno el articulo lo probe y pincha al 100%, me gustaria saber como desde el click de un boton puedo crear controles dinamicamente como texbox y label, por favor ayudarme en esto y si tienes otro tutorial mejor grcias…..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *