La forma en que podemos generar vistas parciales nos agrega un nuevo elemento de complejidad a nuestra aplicación web, sin embargo esto no significa que no podamos encontrar diversas formas de poder atacar este tipo de construcción de aplicaciones en ASP.NET MVC.
Uno de los métodos que se puede pensar es en realizar archivos HTML con las partes necesarias para hacer la vista parcial, pero tiene un problema que es la gran cantidad de datos que deberíamos mover, además de la posible redundancia de código. Para ello luego podemos pensar en utilizar JSON como forma de mover los datos necesarios sin tener que utilizar HTML y aquí ya tenemos una mejor forma de resolver el problema y seguir utilizando las vistas parciales.
Es por ello que veremos otra forma de poder trabajar con las vistas parciales y es utilizando un motor de plantillas en el lado de cliente, esto nos permitirá tener una estructura más sostenible y podremos descargar todo el peso de las operaciones en el navegador liberando a nuestra aplicación del esfuerzo.
Plantillas en el Lado Cliente
Lo primero que debemos saber al respecto es que esto no pertenece a ninguna especificación oficial o estándar, por lo que para lograr implementar este tipo de solución vamos a depender de librerías de terceros, a pesar que suena a una advertencia de un remedio con efectos secundarios, no lo es, de hecho esta libertad hace que podamos utilizar la solución que más se acerque a nuestro gusto.
Sintaxis de la Plantilla
Como debemos utilizar un motor de plantillas este tiene su propia sintaxis para poder ubicar nuestros elementos dinámicos, esto suena algo complejo, pero el set de instrucciones muchas veces es muy intuitivo.
Veamos en la siguiente imagen un código ejemplo de una plantilla y así veremos cómo utilizarla:
Vemos que es solo un HTML simple a primera vista, pero si indagamos más nos fijamos que contiene algunas expresiones especiales, como por ejemplo {{Titulo}} este tipo de expresiones son las que irán sustituidas por nuestros valores dinámicos, con ello podemos reutilizar una y otra vez esta sección sin generar nuevo código, disminuyendo así la cantidad de datos transferidos.
Con esto finalizamos este tutorial, hemos obtenido una pequeña introducción a esta forma de trabajo para realizar vistas parciales, a pesar de que solo mencionamos un motor de plantilla este no es el único que existe en el mercado, debemos hacer una investigación para así poder ver el amplio espectro ofrecido y poder elegir algunos para probar y saber cuál es mejor para nuestras necesidades.
Uno de los métodos que se puede pensar es en realizar archivos HTML con las partes necesarias para hacer la vista parcial, pero tiene un problema que es la gran cantidad de datos que deberíamos mover, además de la posible redundancia de código. Para ello luego podemos pensar en utilizar JSON como forma de mover los datos necesarios sin tener que utilizar HTML y aquí ya tenemos una mejor forma de resolver el problema y seguir utilizando las vistas parciales.
Es por ello que veremos otra forma de poder trabajar con las vistas parciales y es utilizando un motor de plantillas en el lado de cliente, esto nos permitirá tener una estructura más sostenible y podremos descargar todo el peso de las operaciones en el navegador liberando a nuestra aplicación del esfuerzo.
Plantillas en el Lado Cliente
Lo primero que debemos saber al respecto es que esto no pertenece a ninguna especificación oficial o estándar, por lo que para lograr implementar este tipo de solución vamos a depender de librerías de terceros, a pesar que suena a una advertencia de un remedio con efectos secundarios, no lo es, de hecho esta libertad hace que podamos utilizar la solución que más se acerque a nuestro gusto.
Plantilla
Una plantilla es un pequeño código con secciones que podremos llenar con datos de contexto, pero esto por sí solo no funciona, para que pueda verse debemos tener un motor de plantillas, en este caso debe ser un motor Javascript, en este tutorial vamos a utilizar mustache.js que es una librería bastante popular y flexible.
Sintaxis de la Plantilla
Como debemos utilizar un motor de plantillas este tiene su propia sintaxis para poder ubicar nuestros elementos dinámicos, esto suena algo complejo, pero el set de instrucciones muchas veces es muy intuitivo.
Veamos en la siguiente imagen un código ejemplo de una plantilla y así veremos cómo utilizarla:
Vemos que es solo un HTML simple a primera vista, pero si indagamos más nos fijamos que contiene algunas expresiones especiales, como por ejemplo {{Titulo}} este tipo de expresiones son las que irán sustituidas por nuestros valores dinámicos, con ello podemos reutilizar una y otra vez esta sección sin generar nuevo código, disminuyendo así la cantidad de datos transferidos.
Funcionamiento
Esto funciona de forma muy simple, con nuestra armazón Javascript obtenemos los datos JSON de nuestra aplicación, luego con nuestro motor de plantillas armamos nuestro esqueleto y por último “compilamos” para obtener un resultado.
Con esto finalizamos este tutorial, hemos obtenido una pequeña introducción a esta forma de trabajo para realizar vistas parciales, a pesar de que solo mencionamos un motor de plantilla este no es el único que existe en el mercado, debemos hacer una investigación para así poder ver el amplio espectro ofrecido y poder elegir algunos para probar y saber cuál es mejor para nuestras necesidades.
