Cargar scripts bajo demanda con JQuery

Quien no se ha encontrado alguna vez que se va añadiendo potencia y dinamismo a las páginas web con diferentes librerías y al final tenemos una página que carga un montón de ficheros que a veces no se utilizan porque el usuario no ha necesitado esa opción en ese momento en concreto.

Y con la aparición hace tiempo de los MastersPages se ha aumentado esta práctica tanto si hablamos de webForms como con MVC.

Pues gracias a JQuery podemos cargar las dependencias o ficheros .js que necesitemos solo cuando realmente se necesite esa funcionalidad de una forma dinámica y no tener que descargar todo al cargar la página.

Solo tendremos que utilizar getScript para cargar un script remoto con una llamada asíncrona “AJAX” y además no tendremos problemas con cross-domain, porque utiliza JsonP para cargar el script entre dominios.

Pero que mejor que un ejemplo para que quede claro el concepto.

Ejemplo:

Imaginaros que tenemos una aplicación con una búsqueda avanzada oculta que utiliza JQuery, un autocomplete y un watermark.

  • El botón para mostrar el formulario.

Sigue leyendo

[Tip] Intellisense entre ficheros .Js

Dedicado a mi colega Pablo Nuñez que últimamente le veo muy desesperado con el uso de JavaScript. Pablo nunca pierdas la esperanza!!!

Este truco es muy sencillo y nos sirve para poder tener la referencia de un fichero script desde otro fichero script y solo tenemos que insertar el path del fichero que queremos tener la referencia con tres barras estilo comentario.

Pero eso no es todo, también podemos personalizar la información que queremos mostrar como en el resto de nuestro código de la aplicación.

Espero que este truco sea de utilidad ;-)

 

CSS.3 – HTML.5 & Modernizr

A estas alturas nadie puede negar que Microsoft está haciendo una apuesta en firme para dar soporte a los estándares web y un buen ejemplo de esto es en los nuevos proyectos web MVC 3 tenemos la posibilidad de crear aplicaciones con HTML 5 y CSS 3. Pero una cosa que puede que haya pasado más desapercibido es la librería script Modernizr que viene incluido con los ficheros scripts del proyecto. La versión que viene incluida es la 1.7 pero actualmente ya tenemos disponible la versión 2.0.4.

¿Qué es Modernizr?

Modernizr es una librería javascript open-source que nos permite detectar que características de HTML5 o CSS3 que son soportadas por el navegador. De esta manera podemos crear paginas con las últimas funcionalidades que nos brindan estos nuevos estándares sin preocuparnos si el navegador lo soporta o no, porque esta librería nos avisará y nos brindará la posibilidad de utilizar otras librerías para simular esta funcionalidad. Sigue leyendo

CodeBars con ASP.NET MVC

Hace tiempo que quiero pasar todos los artículos que tengo en geeks.ms a esta página, pero pasar tantos articulos de varios años no es nada fácil y por más inri tengo el problema que he perdido la mayoría del material que se encontraba en el anterior server.

Por eso he decidido ir pasando los artículos más vistos y si puedo rehacer los ejemplos para que estén disponibles desde mi nuevo site.

Para empezar he recuperado uno de los artículos más vistos que es como crear una imagen dinámicamente con un Handler para ASP.NET Web forms y mostrar un código de barras con la información que pasa el usuario como parámetros.

Estos artículos los puedes repasar en Geeks: http://geeks.ms/blogs/mrubino/archive/2008/12/04/asp-net-codebars.aspx y en mi site https://mrubino.net/2008/12/asp-net-codebars .

Pero estos ejemplos no sirven para la gente que utiliza ASP.NET MVC porque ya no es necesario los Handlers para tratar las imagen y en su defecto podemos crear un controlador que devuelva directamente la imagen dinámica.

Pero mejor hacer un nuevo ejemplo para ver más claro como funcionaría un controlador que nos devuelva la imagen dinámica. Sigue leyendo

VS2010 – Soporte HTML5, CSS3

Pues eso que Visual Studio no se quiere quedar atras en esta frenética carrera por los nuevos estandares y ya tenemos disponible para descargar la primera revisión de los estandares web para Visual Studio 2010 y Visual Studio Expres 2010 SP1 .

En esta primera versión de la actualización,  el equipo de VS se ha centrado en actualizar el soporte a HTML5 , agregar soporte a CSS 3 y añadir nuevas API para el intellisense de JavaScript. El plan es hacer una versión cada 3 meses para mantener Visual Studio actualizado con los cambios realizados por el W3C. Sigue leyendo

Cargar Controles de Usuario dinámicamente ASP.NET AJAX

En respuesta a la consulta de Julitogtu generada en los foros de MSDN, he generado un ejemplo práctico de su consulta. Ya que le aconsejé la utilización de controles de usuarios generados dinámicamente en detrimento de los famosos iframes.

Pero esta generación se complica especialmente si quieres cargar estos controles con llamadas asíncronas, por el hecho de que estos controles se generan en el servidor.

Lo primero que tenemos que hacer es tener los controles de usuario bien organizados para poderlos utilizar desde el cliente con llamadas a métodos de Página o servicios web, de esta manera evitaremos todo el tráfico que genera los updatePanels.

Yo he generado tres controles de usuarios distintos para probar diferentes posibilidades que nos podemos encontrar en la vida real.

  • Un formulario: Encontraremos los típicos controles asp.net para introducir los datos de un formulario.
  • Login: Dentro de este control tendremos otro ASP.NET para la creación de usuarios registrados.
  • Grid: Control de usuarios donde mostraremos los datos de una base de datos con un GridView. Sigue leyendo

Cancelar peticiones ASP.NET AJAX

ASP_NET-AJAX 

Para plantear la cancelación de una llamada asíncrona realizada con ASP.NET AJAX primero tenemos que tener en cuenta como hemos realizado esta petición, para realizar esta acción podemos elegir entre dos opciones diferenciadas.

  1. El control UpdatePanel que encapsula las peticiones web de forma asíncrona.
  2. Las llamadas a Métodos de Páginas o Servicios web desde el cliente.

1. UpdatePanel

Si hemos elegido la primera opción, cualquier control que realice una petición al servidor será controlada por el ScriptManager y podremos utilizar este mismo control para cancelar la tarea del cliente.

Para poder habilitar la cancelación al cliente usaré una barra de progreso la cual informará al usuario que se esta realizando una tarea y además tendrá un botón para poder cancelar este proceso.

Centrar UpdateProgress en un UpdatePanel ( JQuery )

Lo único que necesitamos es que el botón de la barra de progreso llame a una función javascript, que será la encargada de anular la petición. Sigue leyendo

Buscar en un TreeView con Autocomplete y JQuery

Para que una aplicación web tenga un interfaz de usuario fácil de utilizar y facilitemos su usabilidad no hay más remedio que pasar por un lenguaje script y por eso cada vez que tengo la oportunidad me gusta hacer alguna práctica con JavaScript y en este caso utilizando la librería JQuery que facilita nos facilita mucho esta tarea.

La excusa que utilizo hoy para hacer este ejemplo es una petición en los foros MSDN para hacer una búsqueda de texto en un TreeView y poder seleccionar posteriormente el nodo que coincida con esta selección.

Para esto voy a utilizar un plugin de Jquery que provee a los inputs la extensión de mostrar un autoComplete donde se mostraran los textos de los nodos que coincidan con el texto introducido en el input.

Para las referencias a las librerías Jquery utilizare CDN para aprovechar sus beneficios y no tener obligatoriamente las librerías en nuestro proyecto. Sigue leyendo

GridView Custom Edit

Este año ha sido mucho más productivo de lo que me esperaba y el que comienza parece que me va a deparar nuevos retos personales que espero sean lo más positivos posible.

Para empezar con buen pie y no cejar en mis artículos técnicos, hoy haré un nuevo ejemplo práctico para personalizar un control GridView, permitir editar sus elementos con JavaScript y enviar al servidor de manera asíncrona solo las modificaciones realizadas.

Realmente cada vez existen más controles que nos permiten mejorar la experiencia de usuario y potencian usabilidad de los usuarios. Pero con un poco de tiempo es posible dar este toque a los controles con los que trabajamos cotidianamente.

Para comenzar esta práctica crearemos un nuevo proyecto web y cargaremos una grid con la base de datos NorthWind que no puede faltar en cualquier ejemplo que utilice una base de datos SQL.

Para poder editar la grid lo que tenemos que hacer primero es marcar las celdas que se podrán editar con una propiedad llamada “editable”,  guardar el nombre del registro para tenerlo a mano a la hora de guardar las modificaciones y agregar el evento onmousedown para que llame a la función javaScript de edición tanto en IE como en Firefox. Sigue leyendo

Jquery – la potencia sin control no sirve de nada !!

Yo soy de esos programadores web que están disfrutando con las bondades que nos ofrece JQuery desde su aparición. Esta librería nos simplifica enormemente nuestros desarrollos con JavaScript y los hace mucho más productivos.

Pero hasta ahora realmente no había aprovechado todo su potencial y es precisamente en  esta situación cuando me ha defraudado un poco.

Me explico:

He querido tratar todo un interfaz de usuario con JQuery para optimizar la presentación y evitar las idas y venidas de la página para consultar los datos. Para eso recupero la información para rellenar un control, desde mi capa de datos utilizando un método de página y formato Json, de esta manera se evita enviar la información innecesaria de la página.

Estos datos tienen una estructura mas o menos compleja o al menos más compleja que una simple tabla, porque se tiene que representar en diferentes niveles. Sigue leyendo