How do you pass data from a controller to a Thymeleaf view?

Table of Contents

• Introduction
  • Passing Data Using the Model Object
    • 1. What is the Model Object?
    • 2. Basic Example: Passing a Single Attribute
    • 3. Passing Multiple Attributes
  • Passing Data Using ModelAndView
    • 1. What is ModelAndView?
    • 2. Example: Passing Data with ModelAndView
    • 3. When to Use ModelAndView
  • Passing Collections to Thymeleaf
    • 1. Passing Lists or Arrays
    • 2. Passing Maps to Thymeleaf
• Conclusion

Introduction

In a Spring Boot application, the flow of data from the controller to the view is a key part of building dynamic web applications. Thymeleaf is typically used to render HTML views, and controllers are responsible for providing the data that will populate these templates.

The data is passed to the Thymeleaf view via the Model or ModelAndView objects. These objects allow you to send dynamic data from your controller to the view so that it can be rendered as part of the HTML page.

In this guide, we will show you how to pass data from a Spring Boot controller to a Thymeleaf view using practical examples.

Passing Data Using the Model Object

1. What is the Model Object?

In Spring MVC, the Model object is used to carry data from the controller to the view. It acts as a container for attributes, and the controller adds data to the model, which Thymeleaf then processes to render dynamic content.

2. Basic Example: Passing a Single Attribute

Here’s an example of how to pass a single attribute, such as a user's name, from a controller to a Thymeleaf template.

Controller Example:

Thymeleaf Template (home.html):

In this example:

• The model.addAttribute("name", "John Doe") in the controller adds a name attribute with the value "John Doe" to the model.

• In the Thymeleaf template, the th:text="${name}" dynamically replaces the content of the <span> element with the value "John Doe".

• If you visit http://localhost:8080/home, the rendered page will show:

3. Passing Multiple Attributes

You can also pass multiple attributes to the Thymeleaf view. Each attribute added to the model will be available for rendering in the template.

Controller Example:

Thymeleaf Template (profile.html):

When visiting http://localhost:8080/profile, the rendered page will show:

Passing Data Using ModelAndView

1. What is ModelAndView?

The ModelAndView object combines both the model and the view into a single return object. You can use it to pass data and specify the name of the view in a single return statement.

2. Example: Passing Data with ModelAndView

Here’s an example of using ModelAndView to pass data to a Thymeleaf view.

Controller Example:

Thymeleaf Template (greeting.html):

When you visit http://localhost:8080/greeting, the page will display:

3. When to Use ModelAndView

While using ModelAndView is perfectly fine, it’s generally recommended to use Model in controllers unless you specifically need the combination of the view name and model in one object. This is a more streamlined approach when working with Thymeleaf in Spring Boot.

Passing Collections to Thymeleaf

1. Passing Lists or Arrays

Thymeleaf can render collections, such as lists or arrays, by iterating through them and dynamically displaying each element.

Controller Example:

Thymeleaf Template (items.html):

In this example:

• The th:each="item : ${items}" attribute iterates through the list of items passed from the controller and renders each item in the list.

• Visiting http://localhost:8080/items will display the following list:

2. Passing Maps to Thymeleaf

You can also pass maps to Thymeleaf templates. This is especially useful when you need to work with key-value pairs.

Controller Example:

Thymeleaf Template (userInfo.html):

This will render:

Conclusion

Passing data from a controller to a Thymeleaf view in a Spring Boot application is simple and efficient. You can use the Model object to add attributes that will be rendered in the view, or you can use ModelAndView to return both the data and the view in a single object. By using these methods, you can easily create dynamic web pages that respond to the data passed from your controllers. Additionally, you can pass collections like lists and maps to Thymeleaf templates to render dynamic content more effectively.