Vistas Parciales con ASP.NET y MVC
Una vista parcial es una vista que se representa dentro de otra vista. La salida HTML generada al ejecutar la vista parcial se representa en la vista llamante (o principal). Elimina la codificación duplicada mediante la reutilización de la misma vista parcial en varios lugares. Al igual que las vistas, las vistas parciales utilizan la extensión de archivo .cshtml . Se puede utilizar en la vista de diseño, así como en otras vistas del contenido.
Ejemplo 1:
Para empezar, vamos a crear una vista parcial simple, para la página servicios para fines de demostración. Crearemos una vista parcial para ello, de modo que podamos usar el mismo contenido en múltiples vistas de diseño sin volver a escribir el mismo código en todas partes.
Paso 1: Creación de la vista parcial
Una vista parcial se suele crear en la zona Shared, para que pueda ser invocada desde cualquier vista del proyecto y no esté limitada a una sola zona. Se crea como una vista cualquiera:
Por convención se suelen escribir con barra baja al principio del nombre, y en opciones seleccionar Create as partial view.
Paso 2: Añadiendo contenido a la vista parcial _Nueva
Paso 3: Referencia a una vista parcial
Para referenciar a una vista parcial hay varias maneras.
En este caso utilizaremos Html.Partial, ya que lo que queremos incluir es contenido sencillo sin necesidad de crear un controlador. Html.Partial es solo para diseño.
Html.Partial renderiza la vista parcial como una cadena codificada en HTML.
Paso 4: Probando la aplicación.
Podemos comprobar que se ha incrustado la vista parcial _Nueva a la vista servicios, solo con invocar @Html.Partial y el nombre de la vista parcial.
Ejemplo 2:
Ahora supongamos que se quiere añadir en la zona de artículos una lista de productos nuevos, y la lista está almacenada en una base de datos.
En este nuevo ejemplo crearemos una vista parcial con contenido lógico es decir, con un modelo y un controlador.
Paso 1: Añadiendo vista parcial
Se hace de la misma forma: en la zona de shared, Add, View, la llamaremos _Articulos
y en opciones seleccionar Create as partial view.
Paso 2: Agregando clase modelo
En la estructura del proyecto tiene que estar dentro de la zona Models, clic derecho Add, Class, la llamaremos Modelo.
En el modelo nos creamos un método llamado GetArticulos(), para que a través de una consulta de Linq recuperemos una lista de artículos que tenemos en nuestra base de datos.
Paso 3: Agregando el Controlador
Ahora vamos a crear el controlador ArticulosController.cs
El método controlador debe tener la siguiente decoración [ChildActionOnly] y devolver el método PartialView().
Como lo que necesitamos es enviar al partialView una lista de artículos, llamaremos al modelo GetArticulos() y lo almacenaremos en una variable llamada lista para después retornarla.
Paso 4: Creando la Vista Parcial
Ahora vamos a realizar el código para la vista parcial, recibiendo en ella el objeto List<> . Nos vamos a crear una tabla para almacenar los datos, y con un bucle recorreremos el modelo para que nos devuelva un articulo nuevo y un precio.
Paso 5: Llamar a la vista parcial
Para llamar a una vista parcial con controlador desde una página, tiene diferente sintaxis ya que son métodos void.
Llamaremos a la vista parcial _Articulos con :
@{Html.RenderAction(«NombreVista», «NombreControlador»);}
También se podría llamar con la siguiente sintaxis:
@{ Html.RenderPartial(«NombreVista», «NombreControlador»); }
Ambas hacen exactamente lo mismo, nos permiten incluir un modelo, llaman a un Action y lo incrustan dentro del código, se utiliza sobre todo para cargar modelo en la página principal o layout.
La única diferencia es que Html.RenderAction me permite la llamada enviando un parámetro.
Paso 7: Probando la aplicación.
Ahora podemos ver que se ha creado una lista de productos nuevos a través de un modelo y un controlador.
Autora: Tatiana Patricia Mendoza Osinaga
Curso: Microsoft MCSD Web Applications + SharePoint Apps.
Centro: Tajamar
Año académico: 2016-2017