Una vista parcial es una vista que se representa dentro de otra vista. El HTML generado al ejecutar la vista parcial se representa en la vista que realiza la llamada (o principal). Al igual que las vistas, las vistas parciales usan la extensión de archivo .cshtml

Las vistas parciales son una forma eficaz de dividir vistas de gran tamaño en componentes más pequeños

Por ejemplo, si tienes una página compleja formada por varias partes lógicas, puede ser útil trabajar con cada parte como su propia vista parcial.

Vamos a pasar a explicarlo con dos ejemplos:

Ejemplo 1

Lo primero que hay que realizar es crear la vista parcial en la zona Shared

Se guarda en la carpeta Shared para que la vista pueda ser llamada desde cualquier zona y no esté limitada.

  • Le damos click derecho en add-view

  • Y le damos nombre a nuestra vista parcial

  • Añadimos el contenido a la vista parcial

  • Una vez añadimos el contenido a la vista parcial añadimos la referencia de la siguiente manera:
  • @Html.Partial (“_VistaParcial”)
  • Hacemos referencia de esta manera ya que es contenido sencillo y no necesitamos crear un controlador

  • También hacemos referencia en la vista About ya que queremos que el contenido se muestre en Index y en About.

  • Finalmente probamos la aplicación
  • Podemos ver que se muestra el contenido de nuestra vista parcial


Ejemplo 2

Ahora vamos a hacer un ejemplo de vista parcial, pero con código lógico. Es decir, tendrá un modelo y un controlador.

Cargaremos una tabla que venga de una base de datos que se va a llamar Goleadores

  • Creamos la vista

  • En este caso la llamamos _Goleadores

  • Ahora agregamos el modelo

  • La estructura se tiene que encontrar dentro de la zona models
  • Nos creamos un método llamado GetGoleadores() para que a través de una consulta de LinQ recuperemos la lista de Goleadores de nuestra base de datos

  • A continuación agregamos el controlador
  • Lo llamamos GoleadoresController

  • Como lo que necesitamos es enviar a la Vista Parcial una lista de Goleadores, llamamos al modelo GetGoleadores() y lo almacenamos en la variable, que he llamado lista, para después retomarla.

  • Por ultimo vamos a crear la vista parcial que la he llamado _Goleadores
  • Nos creamos una tabla para almacenar los datos y con un bucle recorremos el modelo para que nos devuelva el Nombre, el Apellido y los Goles de cada Jugador.

  • Llamamos a la vista parcial que en este caso la podremos llamar de dos maneras diferentes:
  • Una manera seria con Html.RenderAction y otra manera con Html.RenderPartial
  • La única diferencia es que RenderAction puede llevar parámetros.

  • Vamos a probar el funcionamiento de la aplicación y podemos ver que se ha creado la tabla de goleadores correctamente.

 

 

 

Autor/a: Borja Aragoneses Centeno

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin 

Centro: Tajamar 

Año académico: 2017-2018 

Enlace GitHub:  Proyecto Vistas Parciales