Vistas
En ASP.NET MVC, las vistas son responsables de generar la interfaz de usuario (UI) y de presentar los datos que se reciben de los controladores. Se encuentran en la carpeta Views de una aplicación MVC y representan la capa de presentación en el patrón Modelo-Vista-Controlador.
1. ¿Qué es una Vista?
Una vista en MVC es un archivo que contiene el código HTML, CSS y, en algunos casos, JavaScript necesario para mostrar la información de la aplicación al usuario. Las vistas utilizan la tecnología Razor para combinar HTML y C#.
Ejemplo básico de una vista
@model MyApp.Models.Product
<!DOCTYPE html>
<html>
<head>
<title>Detalles del Producto</title>
</head>
<body>
<h1>Producto: @Model.Name</h1>
<p>Precio: @Model.Price</p>
<p>Descripción: @Model.Description</p>
</body>
</html>
En este ejemplo:
@model MyApp.Models.Productdefine el tipo de modelo que la vista espera recibir.@Model.Name,@Model.Price, y@Model.Descriptionacceden a las propiedades del modeloProductque el controlador pasa a la vista.
2. Tipos de Vistas
Existen varios tipos de vistas en ASP.NET MVC:
a) Vistas Fuertemente Tipadas (Strongly-Typed Views)
Una vista fuertemente tipada está vinculada a un modelo específico mediante @model, lo que permite acceder directamente a las propiedades del modelo en la vista.
Ejemplo
@model MyApp.Models.User
<h2>Detalles del Usuario</h2>
<p>Nombre: @Model.Name</p>
<p>Email: @Model.Email</p>
b) Vistas No Tipadas
Las vistas no tipadas no están vinculadas a un modelo específico. Se usan cuando no se necesita acceder a propiedades de un modelo, o cuando los datos se pasan mediante ViewBag o ViewData.
Ejemplo
<h2>Bienvenido a la Aplicación</h2>
<p>Esta es una vista no tipada.</p>
c) Vistas Parciales
Una vista parcial es un componente de vista reutilizable que puede ser insertado en otras vistas. Se usa para dividir grandes vistas en componentes más pequeños y manejables.
Ejemplo
Supongamos que tenemos una vista parcial ProductSummary.cshtml para mostrar la información de un producto:
@model MyApp.Models.Product
<div>
<h3>@Model.Name</h3>
<p>Precio: @Model.Price</p>
</div>
Para incluir esta vista parcial en otra vista, se puede usar el método Html.Partial o Html.RenderPartial:
@{ Html.RenderPartial("ProductSummary", product); }
3. Pasar Datos a la Vista
Hay varias maneras de pasar datos a una vista:
a) Usando Modelos
La manera más común es pasar un modelo desde el controlador.
Controlador:
public ActionResult ProductDetails(int id)
{
var product = productService.GetProductById(id);
return View(product);
}
Vista (ProductDetails.cshtml):
@model MyApp.Models.Product
<h1>@Model.Name</h1>
<p>Precio: @Model.Price</p>
b) Usando ViewBag
ViewBag es un objeto dinámico que permite pasar datos de forma débilmente tipada a la vista.
Controlador:
public ActionResult Welcome()
{
ViewBag.Message = "Bienvenido a la aplicación.";
return View();
}
Vista (Welcome.cshtml):
<h2>@ViewBag.Message</h2>
c) Usando ViewData
ViewData es un diccionario débilmente tipado que también permite pasar datos del controlador a la vista.
Controlador:
public ActionResult Welcome()
{
ViewData["Message"] = "Bienvenido a la aplicación.";
return View();
}
Vista (Welcome.cshtml):
<h2>@ViewData["Message"]</h2>
4. Devolviendo Vistas desde el Controlador
Hay varias formas de devolver una vista desde el controlador:
a) return View()
Retorna una vista con el mismo nombre que la acción del controlador.
Ejemplo:
public ActionResult Index()
{
return View();
}
Si la acción se llama Index, el framework buscará una vista Index.cshtml en la carpeta correspondiente al controlador.
b) return View("ViewName")
Permite especificar el nombre de la vista, independientemente de la acción.
Ejemplo:
public ActionResult Custom()
{
return View("CustomView");
}
En este caso, la acción Custom renderizará CustomView.cshtml.
c) return PartialView("PartialViewName")
Este método se usa para devolver una vista parcial.
Ejemplo:
public ActionResult ProductSummary()
{
var product = productService.GetProduct();
return PartialView("ProductSummary", product);
}
5. Helpers en Vistas
ASP.NET MVC incluye varios HTML Helpers que facilitan el trabajo en las vistas, especialmente para formularios.
a) Html.LabelFor y Html.TextBoxFor
Estos helpers generan etiquetas y campos de entrada asociados a propiedades del modelo.
@model MyApp.Models.User
@using (Html.BeginForm())
{
<div>
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name)
</div>
<div>
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
</div>
}
b) Html.DropDownListFor
Este helper genera un select HTML para listas desplegables.
@Html.DropDownListFor(m => m.CategoryId, new SelectList(Model.Categories, "Id", "Name"))
6. Renderización Condicional
Puedes condicionar la renderización de elementos en la vista.
@if (Model.IsAvailable)
{
<p>Producto disponible</p>
}
else
{
<p>Producto no disponible</p>
}
7. Layouts (Diseños)
Los layouts son plantillas que se aplican a varias vistas, similar a los “master pages”. El layout se define con @layout.
Layout (Layout.cshtml)
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"] - MyApp</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Vista que usa el Layout
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewData["Title"] = "Home";
}
<h1>Bienvenido a la Página Principal</h1>
<p>Contenido de la página principal.</p>
Resumen
En ASP.NET MVC:
- Las vistas representan la interfaz de usuario, combinando HTML con C# usando Razor.
- Se pueden pasar datos usando modelos, ViewBag, y ViewData.
- Las vistas parciales y layouts ayudan a mantener el código modular y reutilizable.
- Los HTML helpers facilitan la creación de formularios y elementos de la interfaz.
Estos componentes permiten estructurar la capa de presentación de manera eficaz y flexible.