Introducción

En el inicio de este tutorial, hablamos brevemente sobre los Views o vistas en el patrón MVC e incluso agregamos uno a nuestro proyecto, para ver cómo se ve y qué hace. En este capítulo, veremos con mas profundidad el tema de Views o vistas, empezando en este artículo, donde veremos los conceptos clave de un View.

¿Qué es un View (o Vista)?

Mientras un Controller maneja la conexión entre el backend y el frontend, el View es el resultado visual de una Acción de un Controller. Cuando quieras presentar al usuario algo visual, y eso es lo que usualmente quieres hacer en una aplicación web, es colocado en un View o vista. Un View contiene HTML y código Razor y frecuentemente será la representación visual de tu Modelo. En otras palabras, el Controller genera un objeto Model y luego lo transfiere al View, la cual usa el Model para representar visualmente el contenido del Model al usuario.

Esto puede sonar algo abstracto en este punto, especialmente si tu nunca lo has visto en acción - en ese caso, sugiero volver al inicio de este tutorial, donde agregamos un Model, una View y un Controller a un proyecto, para ver cómo interactuan.

Un View es básicamente solo un archivo HTML con soporte agregado para código Razor. Usa la extensión .cshtml para indicar estas posibilidades extras, y como puedes ver en el capítulo sobre Razor, encontrado donde sea en este tutorial, es muy fácil combinar HTML y código Razor.

¿Dónde son colocadas los Views o vistas?

Los archivo View son normalmente colocados en una carpeta llamada Views en la raíz de tu proyecto MVC. Para hacer esto más sencillo para el framework .NET y tus Controllers localizar las vistas, usualmente creas una subcarpeta dentro de tu carpeta de Vistas para cada uno de tus Controllers, llevando el nombre de tu Controller. Así, si tu tienes un HomeController y un ProductController, tu carpeta Views puede tener subcarpetas con los nombres "Home" y "Product". Cada una de estas subcarpetas puede tener entonces una o varias vistas relacionadas a la acciones de tus controllers. Esto puede verse de la siguiente manera en el Explorador de Soluciones:

Cuando sigues estas convenciones, le permites al framework .NET localizar tus vistas automáticamente a través del proceso llamado View Discovery (Descubrimiento de vistas). Discutiremos ese proceso en uno de nuestros siguientes artículos.

Resumen

Un View o vista es la representación visual de tu Model, entregada al usuario final por el Controller. Usa una combinación de código Razor con HTML para generar algo que el explorador entienda. En los siguientes artículos, profundizaremos sobre temas mas avanzados de Views o vistas.