Comparto la primera parte de otro curso de ASP.NET MVC & JavaScript realizado en la Empresa Desysweb donde todo se trabaja en forma desconectada usando en el Servidor mi Serializador de Cadenas y JavaScript en el Cliente, sobre todo Matrices.
1. Curso MVC & JavaScript Desysweb - Demo 01
En este video se muestra como trabajar con Listas de 2 formas:
- Consulta Síncrona usando el control MVC WebGrid que envia HTML
- Consulta Asíncrona usando XHR y enviando String que son usados para crear una Tabla por JavaScript en el Cliente.
Esta segunda forma es mas eficiente ya que solo se envía los datos (cadenas separadas por un caracter) y en el cliente se construye el HTML usando JavaScript.
2. Curso MVC & JavaScript Desysweb - Demo 02
En este video se muestra como crear una Consulta Asíncrona usando XmlHttpRequest (XHR) enviando Cadenas (String) mediante un serializador personalizado y creando una tabla HTML en JavaScript.
Para el ejemplo se trabaja con una lista de Productos: Código, Nombre, Id del Proveedor, Nombre del Proveedor, Id de la Categoría, Nombre de la Categoría, Precio Unitario y Stock.
3. Curso MVC & JavaScript Desysweb - Demo 03
En este video se muestra como crear un filtro desconectado mediante un ComboBox y usando solo Cadenas en JavaScript.
Para el ejemplo se muestra en un ComboBox las Categorías y al seleccionar una se muestran los Productos por Categoría, pero todo es en el lado del cliente usando JavaScript.
4. Curso MVC & JavaScript Desysweb - Demo 04
En este video se enseña como crear un filtro desconectado mediante las cabeceras de la tabla usando controles de texto para filtrar cada campo, el filtro se hace solo usando Cadenas.
El ejemplo es con la tabla productos y se puede filtrar por código, nombre, proveedor, categoría, precio y stock mediante JavaScript.
5. Curso MVC & JavaScript Desysweb - Demo 05
En este video se enseña como crear un filtro desconectado mediante las cabeceras de la tabla usando controles de textos y combos para filtrar cada campo.
El ejemplo es con la tabla productos y se puede filtrar por código, nombre, proveedor, categoría, precio y stock mediante JavaScript.
6. Curso MVC & JavaScript Desysweb - Demo 06
En este video se muestra como trabajar con matrices y ocultar columnas en la presentación, para lo cual se listan los datos de los productos sin incluir el código del proveedor ni el código de la categoría.
Al seleccionar un producto se muestra un popup con su detalle donde si se muestran todos los datos, incluyendo los ocultos, el cual se realiza usando una búsqueda en la matriz.
Cabe resaltar que en este ejemplo no se usan dos páginas sino dos divs, uno para la lista y el otro para el detalle, lo que hace más rápido la visualización de los datos.
7. Curso MVC & JavaScript Desysweb - Demo 07
En este video se muestra como ordenar columnas en forma ascendente y descendente usando matrices en JavaScript.
Para el ejemplo se crean enlaces en la cabecera de la tabla, los cuales permiten ordenar sobre cada campo de la tabla productos, el primer clic ordena en forma ascendente y el segundo ordena en forma descendente mostrándose el símbolo respectivo.
8. Curso MVC & JavaScript Desysweb - Demo 08
En este video se muestra como paginar registros usando matrices en el cliente usando JavaScript. La paginación consta de enlaces (links) con los números de páginas y a los extremos los botones de avance por bloques, en el caso de que sean demasiadas páginas.
En este ejemplo se usan enlaces (a hrefs) para la paginación los cuales se encuentran sobre una lista de viñetas que se visualizan como botones gracias a la hija de estilos.
9. Curso MVC & JavaScript Desysweb - Demo 09
En este video se muestra como hacer las 3 operaciones en forma conjunta, es decir, paginar registros, ordenar columnas y filtrar registros en el cliente (desconectado) usando matrices en JavaScript.
El ejemplo es con la lista de productos y los datos están paginados y por bloques, también las columnas se pueden ordenar en forma ascendente y descendente y finalmente se puede filtrar por cada campo escribiendo sobre los textos de las cabeceras en cada columna de la tabla.
No hay comentarios.:
Publicar un comentario