MVC con Razor
Introducción
Carpetas que intervienen
Sintaxis Razor
Tag Helpers
Atributos
[HttpPost] y Otros Atributos de Verbo HTTP
Propósito
Ejemplo de uso
[ValidateAntiForgeryToken]
Propósito
Mecanismo de funcionamiento
Recomendación
Implementación de las Operaciones CRUD (GET vs. POST)
El ciclo GET/POST en el CRUD
Ejemplo en el controlador
Visualización en la ventana de inspección del navegador
Inspeccionar el HTML generado (tag helpers)
Inspeccionar las operaciones (pestaña Network/Red)
Introducción
El patrón Modelo-Vista-Controlador (MVC) con Razor es la arquitectura estándar en
[Link] Core para separar datos, lógica y presentación.
Carpetas que intervienen
El patrón MVC divide la aplicación en tres componentes principales, cada uno con su propia
carpeta cuyos nombres convencionales son:
Carpeta Componente Responsabilidad
Models Modelo (Model) Contiene las clases C# que representan los
datos y la lógica de negocio (ej. [Link]).
Views Vista (View) Contiene los archivos .cshtml que usan Razor
para generar la interfaz de usuario (HTML). Se
organizan en subcarpetas por Controlador (ej.
Views/Home/[Link]).
Controllers Controlador Contiene las clases C# que manejan las
(Controller) solicitudes HTTP, acceden a los Modelos y
seleccionan las Vistas a mostrar (ej.
[Link]).
Sintaxis Razor
Razor es el motor de plantillas que se utiliza en las vistas (.cshtml). Permite incrustar código
C# directamente en HTML.
Símbolo Uso Ejemplo
@ Inicia un bloque de código o <h1>@ViewData["Título"]</h1>
imprime el valor de una expresión
C#.
@model Define el tipo de dato C# (el @model List<Estudiante>
Modelo) que la Vista espera recibir
del Controlador.
@{ ... } Bloque de código C# que no se @{ ViewData["Title"] =
imprime directamente, usado para "Listado"; }
lógica, asignación de variables,
etc.
@foreach Bucle C# para iterar sobre @foreach (var item in Model)
colecciones pasadas desde el { ... }
Modelo.
Tag Helpers
Las Tag Helpers son atributos especiales de [Link] Core que se añaden a elementos
HTML estándar (como <form> o <a>). En el servidor, se procesan y reemplazan o modifican
el HTML para generar código específico de MVC (como URLs, campos de validación, etc.).
Tag Helper Elemento Función Ejemplo de HTML
HTML Generado
asp-controller <form>, Especifica el <form action="/Home/Crear"
<a> Controlador objetivo. method="post">
asp-action <form>, Especifica la Acción (Ver columna anterior)
<a> (método) objetivo.
asp-for <input>, Vincula el elemento <input type="text"
<label> a una propiedad del id="Nombre" name="Nombre"
Modelo. Genera id, value="...">
name y maneja la
validación.
asp-route-id <a> Añade un valor a la <a
ruta URL (ej. para href="/Home/Editar/5">Editar
/Home/Editar/5). </a>
Atributos
Los atributos (attributes) son una característica fundamental de .NET y son esenciales en
[Link] Core MVC para configurar el comportamiento de los Controladores y las
Acciones.
Los atributos son metadatos declarativos que se aplican a clases, métodos (acciones),
propiedades, y más. Proporcionan información al runtime (el entorno de ejecución) sobre
cómo debe tratar el código.
[HttpPost] y Otros Atributos de Verbo HTTP
El atributo [HttpPost] es un filtro de acción que restringe qué tipo de solicitud HTTP puede
ejecutar un método del Controlador.
Propósito
Su función es mapear la acción del controlador a un verbo HTTP específico. En el contexto
de un CRUD, esto es crucial para diferenciar entre la solicitud que pide el formulario y la
solicitud que envía los datos para guardarlos.
Atributo Verbo HTTP Uso Típico en CRUD
[HttpGet] GET (El Para mostrar datos o un formulario (Ej:
predeterminado) Index(), Crear(), Editar(id)).
[HttpPost] POST Para enviar datos y crear/modificar un
recurso (Ej: [HttpPost] Crear(Estudiante)).
[HttpPut] PUT Para actualizar recursos (a menudo se
usa POST para PUT/PATCH en
formularios HTML).
[HttpDelete] DELETE Para eliminar recursos (a menudo se usa
POST para Delete en formularios HTML).
Ejemplo de uso
En tu controlador, necesitas dos métodos con el mismo nombre (ej. Crear) para manejar el
ciclo de vida de un formulario:
GET (Solicitud inicial):
/ Se invoca cuando el usuario navega a /Home/Crear.
// Muestra el formulario vacío.
public IActionResult Crear()
{
return View();
}
POST (Envío de datos):
// Se invoca SOLO cuando se envían datos con el método POST desde el formulario.
[HttpPost]
public IActionResult Crear(Estudiante nuevoEstudiante)
{
// Lógica: guardar el nuevoEstudiante en la lista/DB.
return RedirectToAction(nameof(Index));
}
El atributo [HttpPost] le dice al runtime: "Este método solo se ejecuta si la solicitud fue un
envío de formulario (POST)".
[ValidateAntiForgeryToken]
El atributo [ValidateAntiForgeryToken] es una medida de seguridad esencial en las
aplicaciones web modernas.
Propósito
Previene un tipo de ataque web llamado Cross-Site Request Forgery (CSRF) o
Falsificación de Solicitud entre Sitios.
Un ataque CSRF ocurre cuando un sitio web malicioso engaña al navegador del usuario
(que ya está autenticado en tu aplicación) para que envíe una solicitud no deseada (como
una transferencia bancaria o una eliminación de cuenta) a tu aplicación.
Mecanismo de funcionamiento
El sistema [ValidateAntiForgeryToken] funciona en dos partes:
1. Generación del Token (Lado de la Vista):
Cuando se renderiza la vista que contiene el formulario ([Link] o
[Link]), Razor genera automáticamente un campo oculto (un token
criptográfico único) dentro del formulario, gracias al Tag Helper <form asp-
action="..."> o @[Link]().
2. Validación del Token (Lado del Controlador):
Cuando el formulario se envía al servidor (POST), el atributo
[ValidateAntiForgeryToken] en la acción del Controlador realiza dos verificaciones:
○ Verifica que la solicitud incluya el token oculto.
○ Comprueba que el token enviado en el formulario coincida con el token que
está almacenado en la cookie de la sesión del usuario en el servidor.
Si los tokens no coinciden, la solicitud se rechaza y el usuario recibe un error, frustrando
el ataque CSRF.
Recomendación
Siempre aplica [ValidateAntiForgeryToken] a todas las acciones del controlador que
acepten datos por POST y que modifiquen el estado de la aplicación (es decir, todas
las acciones de Crear, Editar y Eliminar).
Implementación de las Operaciones CRUD (GET
vs. POST)
Las operaciones CRUD se implementan en el Controlador mediante Acciones que
responden a diferentes verbos HTTP.
El ciclo GET/POST en el CRUD
Operación Verbo Controlador Propósito
HTTP (Acción)
Read (Listar) GET Index() Devuelve la lista completa de
datos.
Create GET Crear() Muestra el formulario vacío
(Formulario) para crear un nuevo registro.
Create POST [HttpPost] Recibe los datos del
(Guardar) Crear(Estudiante e) formulario, guarda el nuevo
objeto en la colección y
redirige.
Update GET Editar(int id) Busca el registro por id, y lo
(Formulario) pasa a la vista para pre-
rellenar el formulario.
Update POST [HttpPost] Recibe el objeto modificado
(Guardar) Editar(Estudiante e) del formulario y actualiza el
registro correspondiente.
Delete POST [HttpPost] Recibe el id del registro a
Eliminar(int id) eliminar, lo borra de la
colección y redirige. (Usar
POST para Delete es una
buena práctica de seguridad).
Ejemplo en el controlador
public class HomeController : Controller
{
// Accion GET (Mostrar formulario)
public IActionResult Crear()
{
return View();
}
// Accion POST (Recibir y guardar datos)
[HttpPost]
public IActionResult Crear(Estudiante nuevo)
{
// Lógica para guardar el nuevo estudiante
return RedirectToAction("Index");
}
}
Visualización en la ventana de inspección del
navegador
La ventana Inspector/Herramientas de Desarrollador (F12) es esencial para entender
cómo MVC convierte el código Razor en HTML y cómo se envían las solicitudes.
Inspeccionar el HTML generado (tag helpers)
1. Abre el Inspector (F12).
2. Selecciona la pestaña Elementos/Elementos y navega hasta un formulario de
edición o el botón de crear.
3. Verás que las Tag Helpers como asp-action y asp-for ya no existen. [Link] Core
las ha transformado en HTML estándar.
Código Razor (Vista) HTML Generado (Inspector)
<form asp-action="Crear"> <form method="post" action="/Home/Crear">
<a asp-action="Editar" asp-route- <a href="/Home/Editar/5">
id="5">
<input asp-for="Nombre"> <input type="text" id="Nombre" name="Nombre"
value="...">
Esto se debe a que Razor es un motor de renderizado del lado del servidor; el
navegador solo recibe y procesa HTML puro.
Inspeccionar las operaciones (pestaña Network/Red)
La pestaña Network/Red te permite ver las solicitudes HTTP enviadas al servidor.
1. Abre la pestaña Network/Red (F12) y asegúrate de que esté grabando.
2. Ejecuta una operación:
○ Crear/Editar (Guardar): rellena el formulario y envíalo.
○ Verás una solicitud con el método POST dirigida a la URL de la acción (ej.
/Home/Crear). Al hacer clic en esta solicitud, podrás inspeccionar la carga útil
(Payload/Carga) para ver exactamente los datos (los campos del formulario)
que se enviaron al Controlador.
○ Eliminar: haz clic en el botón de eliminar. También verás una solicitud POST
enviada a la acción /Home/Eliminar, con el id del estudiante enviado en el
payload.
3. Visualizar el redireccionamiento: después de un POST exitoso, el servidor no
devuelve la página, sino un código de estado de redirección (302 Found). Luego
verás una nueva solicitud GET a la página Index, lo que implementa el Patrón PRG
(Post-Redirect-Get).