JQuery

WebApi & oData Queries

Hace unos días Scott Guthrie nos anunció en su blog el lanzamiento de la versión Release de las ASP.NET and Web Tools 2012.2 update disponible para Visual Studio 2012 y .Net framework 4.5

Una de las mejoras que más me ha gustado es el soporte de WebApi al estándar oData, este soporte otorga a nuestro servicio REST la potestad de generar Url’s con consultas semánticas, paginado, operaciones CRUD, etc .

Configuración inicial

Para empezar a jugar con esta poderosa opción primero tenemos que tener el ejemplo base listo:

  • Instalar el web Tools
  • Crear un nuevo proyecto WebApi
  • Que el servicio retorne datos de prueba. En este caso una lista de facturas para las pruebas Sigue leyendo →
Anuncio publicitario

Deserializar JSon a tipo anónimo .Net

En ciertas ocasiones podemos necesitar deserializar un objeto pasado desde un cliente en formato JSon a un tipo .net anónimo. Por ejemplo si utilizas MongoDB con el driver NORM y pretendes filtrar u ordenar de una manera dinámica, es difícil pasar estos objetos a la query para poder generar un filtro dinámico.

Para hacernos una idea esta sería una consulta paginada y  con un filtro sencillo con NORM:

//NoRM anonymous objects:
return GetRepository().GetCollection("Personas")
   .Find(
          new { Nombre = Q.IsNotNull() }, //Where
          new { Fecha = OrderBy.Descending }, //OrderBy
          10, // Nº elementos de la secuencia "Skip"
           0 // Primer elemento de la secuencia "Take"
);

Esta consulta nos devolvería las 10 primeras personas con Nombre que no sea null. Sigue leyendo →

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 →

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 →

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 →

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 →

Centrar UpdateProgress en un UpdatePanel ( JQuery )

Todos conocemos el control UpdateProgress de ASP.NET y el gran avance que supone para la experiencia de usuario cuando trabajamos con UpdatePanels.

Pero para mi gusto le ha faltado poder posicionar ese control sobre el panel que estamos actualizando y de esta manera dejar mucho más claro al usuario que parte de la pantalla estamos actualizando.

Para eso después de consultar muchos ejemplos que no me terminaban de convencer y con un poquito de imaginación he utilizado un poquito de Javascript para poder realizar este efecto.

Comencemos con los controles que necesitamos para recrear este efecto:

  • Progress.ascx: Este control de usuario es el que contendrá la barra de proceso, en este caso una animación y una label con el texto «cargando…», la ventaja de utilizar un control de usuario es que no tendremos que repetir el código para cada página que necesitemos una barra de progreso y si nuestra aplicación es multiidioma podremos utilizar los recursos para mostrar el mensaje en el idioma adecuado.

Sigue leyendo →