Vista Listar Personas Fase2 - eliizquierdo/material_programacion_avanzada2026 GitHub Wiki
📦 Proyecto:
mini-crud1(Fase 2) — ⬇️ Descargar ZIP · ☁️ Abrir en Codespace
Esta es la página que muestra todas las personas registradas en una tabla y permite realizar todas las operaciones CRUD desde una sola vista.
Antes:
<!-- Botones deshabilitados -->
<button disabled class="btn-disabled">Editar</button>
<button disabled class="btn-disabled">Eliminar</button>Ahora:
<!-- Botones funcionales -->
<a class="btn btn-edit" href="...">Editar</a>
<form method="post">
<button type="submit" class="btn btn-danger">Eliminar</button>
</form><a class="btn btn-edit"
href="${pageContext.request.contextPath}/persona?action=cargarEditar&codigo=${p.codigo}"
>Editar
</a>¿Qué hace?
- Genera un enlace GET hacia el controlador
- Envía
action=cargarEditar&codigo=...para cargar los datos - El controlador busca la persona y abre
persona-editar.jspprecargado
<form action="${pageContext.request.contextPath}/persona?action=eliminar" method="post" style="display: inline;">
<input type="hidden" name="codigo" value="${p.codigo}">
<button type="submit" class="btn btn-danger"
onclick="return confirm('¿Eliminar el registro ${p.nombre}?');">
Eliminar
</button>
</form>¿Qué hace?
- Usa un formulario POST (no GET) para la eliminación
- Incluye el código como campo hidden
- Agrega confirmación JavaScript antes de enviar
- Envía
action=eliminaral controlador
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Listado de Personas</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
</head>
<body>
<div class="page-container">
<h1>Listado de Personas</h1>
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<c:if test="${not empty requestScope.personas}">
<c:forEach var="p" items="${requestScope.personas}">
<tr>
<td>${p.codigo}</td>
<td>${p.nombre}</td>
<td class="actions">
<!-- Botón Editar -->
<a class="btn btn-edit"
href="${pageContext.request.contextPath}/persona?action=cargarEditar&codigo=${p.codigo}"
>Editar
</a>
<!-- Botón Eliminar -->
<form action="${pageContext.request.contextPath}/persona?action=eliminar" method="post" style="display: inline;">
<input type="hidden" name="codigo" value="${p.codigo}">
<button type="submit" class="btn btn-danger"
onclick="return confirm('¿Eliminar el registro ${p.nombre}?');">
Eliminar
</button>
</form>
</td>
</tr>
</c:forEach>
</c:if>
<c:if test="${empty requestScope.personas}">
<tr>
<td colspan="3" style="text-align: center; color: #6b7280;">
No hay personas registradas
</td>
</tr>
</c:if>
</tbody>
</table>
</div>
<div class="section-gap">
<a class="btn" href="${pageContext.request.contextPath}/persona?action=agregar">Agregar Persona</a>
</div>
</div>
</body>
</html>- Editar: Usa GET porque solo carga datos (no modifica nada)
- Eliminar: Usa POST porque modifica el estado (elimina datos)
- Agregar: Usa GET para mostrar el formulario vacío
- Confirmación de eliminación: JavaScript pregunta antes de eliminar
- Nombres personalizados: "¿Eliminar el registro Ana?" en lugar de genérico
-
Estilos diferenciados:
btn-edit(verde) ybtn-danger(rojo)
- Formulario inline: El botón eliminar está en su propio formulario
- Campos hidden: El código se envía sin mostrarlo al usuario
- PRG compatible: Todas las operaciones redirigen después de procesar
-
Sin código Java en la vista:
<c:forEach>y<c:if>reemplazan alfory alifque antes se escribían con scriptlets
Lista → [Agregar] → GET /persona?action=agregar → Formulario → POST → Lista
↓
→ [Editar] → GET /persona?action=cargarEditar&codigo=X → Formulario precargado → POST → Lista
↓
→ [Eliminar] → POST /persona?action=eliminar → Confirmación → Eliminación → Lista
persona-lista.jsp · tabla · editar · eliminar · confirm · GET · POST · action · formulario inline · campo hidden · PRG · c:forEach · c:if · Expression Language · EL · PersonaVO
🧠 Autoevaluación — Mini-CRUD con MVC
← VISTA: Editar Persona · 🏠 Inicio · Validación de unicidad de código →
