[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;)

6 comentarios en “[ASP.NET MVC]…”Cositas” que podemos hacer con jQuery I”

  1. Gracias por responderme, te explico me problema y me gustaria que me ayudaras ya que veo que explicas claramente como se hacen las cosas…Estoy realizando me trabajo de diploma y necesito d estas cosas para terminarlo:
    Estoy haciendo una aplicacion en MVC 2.0 asp.net 4.0 y utilizando como gestor de base datos Couchdb…
    Ahora el primero de mis problemas es como antes te indicaba necesito tener una clase generica LLamada ESquemadeAutenticacion, y que en la interfas el admin pueda agregar todos los parametros de autenticacion que kiera para ese esquema al estilo llave-valor ejemplo:
    usuario : valor
    Pass : valor
    y asi sucesivamente, todos los parametros que desee, que tenga un botton k le de la funcionaliad de ir agregando nuevos parametro dinamicamente si se desea.

    El segundo de los “problemas es que subas” un tutorial si tienes tiempo claro de como validar un formulario en esta aplicacion con jquery o otra cosa, k me permita validar si el esquema que estoy creando ya esta en la basedatos u otras validaciones

    gracias de antemano

  2. jajaja X-)
    no puedo creer que te comenten pidiendo resolver “la tarea”

    sin dudas Alex no te has interesado en investigar, ni probar resolverlo por tu cuenta
    Ademas lo que pides lo puedes encontrar con cualquier buscador

    mal por ti

  3. Hola Alex, sobre el tema de validaciones en ASP.NET MVC se ha escrito bastante. Un enlace muy interesante donde se explica este tema es el siguiente:
    http://msdn.microsoft.com/es-es/magazine/ee336030.aspx

    Si necesitas más información sobre la validación de modelos, aquí te dejo un enlace a uno de mis artículos en el que se habla de ello:
    http://geeks.ms/blogs/gortigosa/archive/2010/12/30/asp-net-mvc-validaci-243-n-modelo-entity-framework.aspx

    Espero que te sirva de ayuda.
    Un saludo

  4. Hola Kamiquiroz,
    Una de las opciones para pasar parámetros del modelo a una función javascript, es el uso de WCF. Pero existe una pega, para llamar a un servicio web WCF desde JQuery es que el request debe ser bajo la notación JSON. jQuery no incluye un método para serializar JSON, por lo que se suele utilizar algún tipo de librería externa como:
    https://github.com/douglascrockford/JSON-js

    En breve escribiré un artículo relacionado con este tema, en el que se vea todo el proceso completo.

    Un saludo

Deja un comentario

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