En aplicaciones web tenemos secciones que contienen datos dinámicos, pero la particularidad es que estas secciones podríamos reutilizarlas en varias partes de nuestra aplicación. Para lograr esto en ASP.NET MVC tenemos un recurso denominado vistas parciales, estas se apoyan en lo robusto del framework para generar funcionalidades realmente interesantes.
Vistas Parciales
Las vistas parciales son un enfoque diferente a los Layouts ya que estas no son una plantilla donde irá incluido el código y porque tampoco su objetivo es que todo se vea de forma homogénea, el objetivo de una vista parcial es mostrar datos y tener una funcionalidad pero que la podamos aplicar en múltiples partes de la página y solo debemos escribirla una sola vez.
Por ejemplo una posible aplicación de esto puede ser en un sitio de subastas donde necesitemos colocar una sección con las últimas subastas que se le han aplicado al ítem, una pequeña foto y el precio, en vez de tener que escribir este código en cada vista podemos hacer la aplicación de una vista parcial.
Generar una Vista Parcial
Para generar una vista parcial primero debemos decidir que va a llevar, luego hacemos nuestra lógica y la plasmamos en un archivo, este archivo debe ir en el directorio Shared de views, es decir, va en la carpeta compartida de nuestra aplicación.
Veamos en la siguiente imagen el código que necesitamos para lograr lo que habíamos mencionado en el ejemplo:
Sí nos vamos al detalle vemos que importamos nuestro modelo en este caso denominado Auction ya que es una subasta, luego escribimos el contenido y a cada sección le agregamos con Razor el valor que debe imprimir, como vemos esto no es nada complicado.
Luego si queremos utilizar esta vista parcial debemos hacer uso de Html.Partial() de esta forma podemos generar lo que ya construimos como parte de otra vista.
Escribamos el código que utilizaríamos para lograr lo que hemos explicado:
Si vemos lo que sucede, es que primero hacemos un foreach para recorrer cada uno de los elementos almacenados en el modelo, luego esto se lo pasamos a nuestra vista parcial Auction a través del método Html.Partial() y junto a esto le pasamos el nombre de la misma sin la extensión del archivo.
Esto podemos lograrlo gracias a los diferentes Helpers que tenemos en el framework, este método Html.Partial() funciona de forma muy similar a View(), difiriendo en que el primero está destinado a generar contenido como parte de otras vistas.
Con esto finalizamos este tutorial, ya tenemos una nueva herramienta que nos permite escribir la menor cantidad de código posible mientras aumentamos las secciones funcionales de nuestras páginas.
Vistas Parciales
Las vistas parciales son un enfoque diferente a los Layouts ya que estas no son una plantilla donde irá incluido el código y porque tampoco su objetivo es que todo se vea de forma homogénea, el objetivo de una vista parcial es mostrar datos y tener una funcionalidad pero que la podamos aplicar en múltiples partes de la página y solo debemos escribirla una sola vez.
Por ejemplo una posible aplicación de esto puede ser en un sitio de subastas donde necesitemos colocar una sección con las últimas subastas que se le han aplicado al ítem, una pequeña foto y el precio, en vez de tener que escribir este código en cada vista podemos hacer la aplicación de una vista parcial.
Generar una Vista Parcial
Para generar una vista parcial primero debemos decidir que va a llevar, luego hacemos nuestra lógica y la plasmamos en un archivo, este archivo debe ir en el directorio Shared de views, es decir, va en la carpeta compartida de nuestra aplicación.
Veamos en la siguiente imagen el código que necesitamos para lograr lo que habíamos mencionado en el ejemplo:
Sí nos vamos al detalle vemos que importamos nuestro modelo en este caso denominado Auction ya que es una subasta, luego escribimos el contenido y a cada sección le agregamos con Razor el valor que debe imprimir, como vemos esto no es nada complicado.
Luego si queremos utilizar esta vista parcial debemos hacer uso de Html.Partial() de esta forma podemos generar lo que ya construimos como parte de otra vista.
Escribamos el código que utilizaríamos para lograr lo que hemos explicado:
@model IEnumerable<Auction>
<h2>Resultados</h2>
@foreach(var auction in Model) {
@Html.Partial("Auction", auction)
}
Si vemos lo que sucede, es que primero hacemos un foreach para recorrer cada uno de los elementos almacenados en el modelo, luego esto se lo pasamos a nuestra vista parcial Auction a través del método Html.Partial() y junto a esto le pasamos el nombre de la misma sin la extensión del archivo.
Esto podemos lograrlo gracias a los diferentes Helpers que tenemos en el framework, este método Html.Partial() funciona de forma muy similar a View(), difiriendo en que el primero está destinado a generar contenido como parte de otras vistas.
Utilidad
Este método que hemos mostrado acá es bastante útil para generar secciones y disminuir la complejidad y la cantidad de código en nuestras aplicaciones, sin embargo, el verdadero uso se consigue cuando utilizamos estos métodos en conjunto con AJAX, así podremos exprimir al máximo las herramientas de ASP.NET MVC.
Con esto finalizamos este tutorial, ya tenemos una nueva herramienta que nos permite escribir la menor cantidad de código posible mientras aumentamos las secciones funcionales de nuestras páginas.
