Tipos de vistas en ASP.NET MVC

Las vistas son la única parte de nuestras aplicaciones a las cuales acceden los usuarios. En las mismas se darán todas las interacciones del usuario con la aplicación, por lo que deberá tener una experiencia agradable y fluida.

ASP.NET MVC nos ofrece tres tipos de vistas:

  • Master o Layout: son el tipo de vistas que nos permiten compartir una serie de características a través de distintas páginas. Generalmente en esta vista ponemos la base del diseño de la aplicación, el encabezado, los menúes, y las referencias comunes a ser usadas (como los archivos css del sitio, librerías JavaScript como jQuery o archivos JavaScript propios). En este tipo de vistas es donde están todas las etiquetas básicas que debe tener una página HTML.
    Por defecto, un nuevo proyecto de ASP.NET MVC trae el archivo _Layout.cshtml. Sin embargo podemos crear todos los Layouts que necesitemos, como por ejemplo uno particular para los accesos realizados mediante dispositivos móviles.
    En las páginas Layout debemos indicar donde se incluirán las vistas que lo utilicen. Esto se realiza mediante @RenderBody()
    IncluirVistasLayout
    Sección donde se incluirán las vistas que usen el Layout
  • Vistas: son las que desarrollamos normalmente en nuestra aplicación, generalmente una por acción que tengamos en nuestros controladores. En las mismas podremos referenciar que Layout utilizar mediante el siguiente código (en caso de que no queramos utilizar ningún Layout, solo debemos asignarle null):
    AsignarLayout
    Asignar el Layout a utilizar en una vista
  • Vistas parciales: una funcionalidad muy útil y que a veces no la utilizamos mucho. Las vistas parciales son como las vistas normales, pero pueden ser incluidas en otras vistas. En el template de proyecto ASP.NET MVC de Visual Studio se puede observar un ejemplo de esto para la vista _LoginPartial.
    Las vistas parciales son muy útiles para poder agrupar aquel contenido que necesitamos compartir entre varias vistas, pero que a su vez no debe formar parte del Layout. También tienen utilidad para modularizar aquellas vistas muy “pesadas”, como pueden serlo páginas con mucho contenido o formularios complejos, promoviendo la mantenibilidad a futuro de las mismas. Otro uso muy común es utilizarlas para renderizar contenido en una página de forma asíncrona a través de una llamada AJAX.
    Un ejemplo (del trabajo final de mi carrera) donde realicé una página de documentación con todo el contenido modularizado en vistas parciales es el siguiente:
    EjemploVistasParciales
    Ejemplo vistas parciales

    Como se puede ver, la invocación de una vista parcial es muy sencilla. Y logra mantener de forma ordenada y prolija el contenido de nuestras vistas.

Un diagrama sencillo de como es la relación entre los distintos tipos de vistas es el siguiente:

DiagramaVistas
Diagrama de como se relacionan los distintos tipos de vistas

Aunque es un tema relativamente sencillo, nunca está de más recordar las funcionalidades que nos brinda cada tipo de vista, eligiendo cual es apropiado usar para cada necesidad.

Anuncios

2 comentarios en “Tipos de vistas en ASP.NET MVC

  1. Hola Diego, aunque dices que es un tema sencillo, si es importante el tema de las vistas parciales, he visto muchos desarrollos en los que repiten código en toda la aplicación, código que debería estar en una vista parcial y así mejorar la mantenibilidad del mismo.

    Saludos!

    Me gusta

    • Muchas gracias por su comentario Julio.
      Comparto totalmente su opinión. Las vistas parciales nos permiten unificar lógica y presentación que comúnmente están repetidas. Aunque en un primer momento el contenido esté en solo una vista, cuando comenzamos a repetirlo debemos tomarnos el tiempo para crear una vista parcial. Sin duda esto hará que sea más mantenible, además de evitar errores por tener cosas duplicadas.

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s