Contexto del Modelo en Spring y Thymeleaf


1. Modelo en Spring MVC

Definición: El modelo en Spring MVC es un contenedor que transporta datos entre el controlador y la vista (en este caso, Thymeleaf).

Uso: Los controladores de Spring pueden agregar atributos al modelo mediante el uso de Model, ModelMap o ModelAndView. Estos atributos son luego accesibles en la vista Thymeleaf.

@Controller
public class MiControlador {

    @GetMapping("/ejemplo")
    public String ejemplo(Model model) {
        model.addAttribute("mensaje", "¡Hola, Thymeleaf!");
        return "ejemplo"; // Nombre de la vista Thymeleaf
    }
}

2. Contexto del Modelo en Thymeleaf

Acceso a Datos: En Thymeleaf, los atributos del modelo se pueden acceder utilizando expresiones. Por ejemplo, el atributo mensaje que se agregó en el controlador puede ser utilizado en la vista de la siguiente manera:

<p th:text="${mensaje}"></p> <!-- Esto renderiza "¡Hola, Thymeleaf!" -->

📝 Nota


${}: Para acceder a atributos del modelo.

#: Para acceder a funciones de utilidades.

@: Para acceder a beans Spring.

3. Datos Dinámicos y Binding

Datos Dinámicos: Thymeleaf puede mostrar datos dinámicos que provienen del modelo. Puedes utilizar atributos como th:text, th:href, th:src, etc., para vincular valores desde el modelo.

<a th:href="@{/usuario/${usuarioId}}">Ver Usuario</a>

4. Binding de Formularios

En el caso de formularios, puedes enlazar el modelo a un objeto. Por ejemplo:

@PostMapping("/usuario")
public String crearUsuario(@ModelAttribute Usuario usuario) {
    // Lógica para guardar el usuario
    return "redirect:/usuarios";
}

En la vista, puedes utilizar:

<form th:action="@{/usuario}" th:object="${usuario}" method="post">
    <input type="text" th:field="*{nombre}" />
    <button type="submit">Crear</button>
</form>

5. Manejo de Errores

Thymeleaf permite manejar errores de validación utilizando:

<form th:action="@{/usuario}" th:object="${usuario}" method="post">
    <input type="text" th:field="*{nombre}" />
    <div th:if="${#fields.hasErrors('nombre')}" th:errors="*{nombre}">Error en nombre</div>
    <button type="submit">Crear</button>
</form>