[ASP.NET MVC]…”Cositas” que podemos hacer con jQuery I

Últimamente, por motivos laborales, no puedo dedicar el tiempo que me gustaría al blog. Por eso de aquí en adelante aprovecharé a escribir pequeños artículos relacionados con comentarios o preguntas que vayan surgiendo a través del mismo. Así que os invito a que me hagáis llegar vuestras cuestiones, dudas…y en la medida de lo posible intentaré dar respuesta a todas ellas en forma de artículos.

En el caso que vamos a ver hoy, la cuestión que se me planteó, a raíz del post “Crear controles dinámicos mediante jQuery”, es la siguiente:“me gustaría saber como desde el click de un botón puedo crear controles dinámicamente como texbox y label”

Las opciones son múltiples, sobretodo porque jQuery nos aporta una amplia gama de posibilidades y nos ofrece una gran flexibilidad para personalizar nuestras aplicaciones. La que yo he implementado es la siguiente:

1. Creamos una aplicación web MVC 3, y elegimos como motor de vista ASPX. Los que se manejen con Razor también pueden hacerlo con este motor 😉

image

2.Modificamos el código de nuestra vista por defecto, que en nuestro caso es Index.aspx. Dentro de ella:

– Añadimos la referencia al script de jQuery para que podamos implementar sus métodos correspondientes:

  1. <script src=”../../Scripts/jquery-1.4.4.js” type=”text/javascript”></script>

– Creamos los controles que vamos a utilizar. Por un lado definimos un botón que se encargará de lanzar la función write, que nos muestre un textbox, y un texto dentro de este según una serie de parámetros. Y por otro lado definimos el cuadro de texto a mostrar, al que aplicamos el estilo “display:none” para que no aparezca inicialmente.Para ello añadimos el siguiente código:

  1. <button id=”button”>Write</button>
  2. <input id=”dialog” type=”text” style=”display:none”/>

– Añadimos el correspondiente código javascript, en el que creamos la función write para que reciba tres parámetros(mensaje que queremos mostrar, estado para mostrar el cuadro de texto, y el estado para mostrar el texto). Si state es true, nos mostrará todos los controles de tipo input que hayamos añadido, por la forma que definimos el selector (“input”). Sin embargo si txt es true el texto sólo se añadirá en aquel control cuyo id sea dialog también por la forma que definimos el selector(“#dialog”).

 

En este caso, partiendo de que state es siempre true si el parámetro txt es true, se mostrará tanto el textbox como el texto de prueba.

  1. <script type=”text/javascript”>
  2. jQuery.write = function (message, state,txt) {
  3.     if (state == true) {
  4.         $(“input”).show();
  5.         if (txt == true) {
  6.             $(“#dialog”).val(message);
  7.         }
  8.  
  9.     }
  10. };
  11.  
  12.  $(document).ready(function () {
  13.      $(“#button”).click(function () {   
  14.             $.write(“Esto es una prueba”,true,true)   
  15.             });     
  16.         });
  17. </script>

image 

Si el parámetro txt es false, al hacer clic sobre el botón sólo se mostrará el textbox.

  1. <script type=”text/javascript”>
  2. jQuery.write = function (message, state,txt) {
  3.     if (state == true) {
  4.         $(“input”).show();
  5.         if (txt == true) {
  6.             $(“#dialog”).val(message);
  7.         }
  8.  
  9.     }
  10. };
  11.  
  12.  $(document).ready(function () {
  13.      $(“#button”).click(function () {   
  14.             $.write(“Esto es una prueba”,true,false)   
  15.             });     
  16.         });
  17. </script>

image 

Aunque en este ejemplo hemos utilizado unos parámetros booleanos fijos, aplicados directamente sobre la vista, también se podría pasar un parámetro variable definido mediante el modelo, que será lo que intentaremos ver en el próximo artículo 🙂

Seguro que esta misma funcionalidad ha sido implementada de otra forma diferente, así que desde aquí os animo a comentarlo;)