Vistas parciales con ASP.NET y MVC
Una vista parcial es una vista dentro de otra vista, es decir, un fragmento de código que se genera en la vista principal dónde habremos llamado a esta vista parcial. La extensión utilizada es .cshtml, igual que las vistas convencionales.
Su principal objetivo será el de administrar de manera más eficiente nuestra aplicación, ya que, permite tener en la vista el contenido principal y las referencias a dichas vistas parciales, las cuales estarán separadas del código principal y se podrá trabajar con cada una de ellas de manera aislada. Además, permitirá reducir la duplicación del código cuando queramos incluir el mismo elemento en diferentes vistas.
Para que sea más fácil de entender vamos a realizar dos ejemplos:
En nuestra demostración utilizaremos una aplicación con 4 vistas. Crearemos una vista parcial para poder utilizarla en diferentes páginas sin tener que volver a escribir el código en cada una de ellas.
1. Creación de la vista parcial
Crearemos la vista parcial en la carpeta Shared para poder llamarla con mayor facilidad desde cualquier lugar dentro de nuestro proyecto.
Normalmente el nombre de la vista parcial empieza con barra baja por convención. En nuestro caso la llamaremos _VistaParcial y elegiremos la opción de crearla como vista parcial (no es obligatorio, ya que lo único que hace es dejar la vista totalmente vacía).
2. Contenido de la vista parcial
Añadiremos el código que queramos a nuestra vista parcial. Este código será el que se genere en la vista principal donde llamemos a esta vista parcial.
3. Referencia a la vista parcial
Una vez que tengamos creada nuestra vista parcial, habrá que llamarla en la vista que queremos que se genere, para ello se utilizará @Html.Partial(“NombreVista”) ya que solo queremos el diseño (más adelante se explicarán otras opciones). En nuestro caso, la referenciamos en la vista de Index.
4. Comprobación
Para finalizar, lanzaremos la aplicación y comprobaremos que aparezca el contenido de nuestra vista parcial en la página de Index.
Ahora vamos a realizar otro ejemplo, pero esta vez recuperando datos de una base de datos y mostrando una lista de coches en nuestra vista. Para ello crearemos una vista parcial con contenido lógico, es decir, con un modelo y un controlador.
1. Creación de la vista
Como hemos hecho en el anterior ejemplo, añadiremos la nueva vista en nuestra carpeta Shared. Mostraremos una lista de coches, por lo tanto, la llamaremos _ListaCoches y seleccionaremos crear la vista como vista parcial.
2. Creación del modelo
Crearemos una clase nueva donde se añadirá el método para recuperar los datos de la base de datos Concesionario. Esta clase tiene que estar ubicada en la carpeta Models.
Dentro de nuestro modelo tendremos que instanciar el contexto para poder acceder a los datos de Concesionario y crearemos el método GetCoches(), el cual mediante la siguiente consulta de LinQ nos devolverá una lista de coches.
3. Creación del controlador
Ahora habrá que crear el controlador CochesController que nos devolverá la vista parcial. Primero se llama al método creado anteriormente (GetCoches()) y el resultado se almacenará en una lista llamada coches que se enviará mediante el método PartiaView(coches) a la vista parcial.
*Podríamos colocar en el ActionResult _ListaCoches() la decoración [ChildActionOnly] para restringir el acceso a dicha url desde fuera de la aplicación. De este modo, si se teclea la url de la acción nos derivará a una página de error y solo se podrá acceder a esta acción mediante @Html.RenderAction().
4. Contenido de la vista parcial
Tendremos que añadir el código que queramos en la vista parcial _ListaCoches. En nuestro caso recibiremos una lista de coches en nuestro modelo. Con este modelo crearemos una tabla mediante un bucle con todos los registros de nuestra base de datos, mostrando los diferentes campos que le indiquemos.
5. Llamada a vista parcial
Haremos la llamada a nuestra vista parcial en el lugar donde queremos que aparezca dentro de la vista Coches con la siguiente línea:
@{
Html.RenderAction(“NombreVista”, “NombreControlador”);
}
*Podríamos utilizar también RenderPartial en vez de RenderAction. Las dos opciones cumplen con la misma función de cargar la vista parcial, pero RenderAction permite incluir un parámetro para ser enviado en caso de necesitarlo.
6. Comprobación
Por último, ejecutaremos la aplicación para verificar que aparece la vista parcial en la vista Coches.
Autor/a: Victor Lainez Mesado
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019
Código / recursos utilizados / Otros datos de interés: https://github.com/vLAINm/VistasParciales